pdf图片页面如何居中到页面 #pitstop插件

何使pdf页面中的图像居中？

大家好，我是老张。之前的视频中我教过大家如何使用九宫格来移动pdf页面，使其位于页面正中央。然而，有些粉丝按照我的方法操作后发现页面并没有居中，问我该怎么办？

首先，我要提醒大家，如果你要编辑或修改pdf文件，必须了解其对象类型。pdf文件有两种对象类型：矢量文件和图像文件。如果你对这些对象类型不熟悉，或者想使用pdf中的自动插件，建议在我的主页上学习一下我的自动操作基础。

现在，使用pdf的基础选择命令，选择其中的对象。如果显示为图像对象，那么这些都是图像对象。注意，这些图像对象中有空白区域，还有图像外部的空白区域。如果使用九宫格移动来移动图像，会出现什么情况呢？

九宫格移动命令可以将图像按照九宫格的位置进行摆放，默认情况下水平和垂直都居中。点击确定后，图像居中了，但页面中的内容并未居中。点击图像查看，图像只是居中了，但图像中的内容并未位于文件中央。

因此，我们需要使用另一个动作——智能修图。使用智能修图可以处理所有对象，使其位于页面中央，忽略白色区域。首先，使用智能修图，点击运行，这里使用默认设置即可。水平和垂直默认居中，也可以单独选择。点击ok，所有内容都居中了。

现在还有一个问题，即每个页面的页码位置没有在同一水平线上，只是图像上下左右居中了。如果想让页码在同一水平线上，该怎么办呢？只有在使用智能修图居中后才能使用九宫格移动。因为使用对象选择选择对象时，它们会出现一个矩形框，只有在有内容的地方才会出现。现在，使用九宫格移动，如何让页码在同一水平位置？只需将上中下对齐，然后按下边对齐，左边和右边，不要管它，让它在中间就可以了。

按下边对齐后，如果直接点击ok，页码会对齐到页面底部，因此可以微调一下，向上移动一些，移动多少呢？比如将页边距设为25毫米，然后向上调整25毫米，这样就可以点击“确定”了。这样所有页面的下边缘都会与页面边缘保持25厘米的距离。现在可以看到，下边缘已经对齐，而上边缘还有一些空白。如果需要上下边缘的大小一致，可以再次进行调整。

再次使用“对齐”命令，将下边缘调整为对齐状态，上边缘刚才留了25毫米似乎留少了，可以将其调整为35毫米，然后测量一下上边缘和下边缘的空白，然后根据实际情况自行计算留白的大小，这样就可以让上下边缘都对齐了。这样就完成了设置。

直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。如下代码：

<div class="container">
hi,imooc!
</div>

css代码：

<style>
    .container{
    height:100px;
    line-height:100px; /* 仅能用于单行文本 */
    background:#999;
}
</style>

垂直居中-图片以及行内块元素

<div class="container">
<img src="imgegs/icon.png" />
</div>

css代码：

<style>
.container{
    height:100px;
    background:#999;
}
.container img{
    vertical-align:middle;
}
</style>

垂直居中-父元素高度确定的多行文本(方法一)

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

方法一：使用插入table(包括tbody、tr、td)标签, 同时设置vertical-align：middle。

说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td 或th时,才会生效。所以又要插入table标签了。

下面看一下例子：

html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代码：

table td{height:500px;background:#ccc}

因为td标签默认情况下就默认设置了vertical-align为middle, 所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本(方法二)

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell, 激活vertical-align属性, 但注意IE6、7并不支持这个样式。

html代码：

<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>

css代码：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

垂直居中--方法三

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    background-color: orange;
}
/*
* 思路一：left:50%;top:50%;margin-left: -200px;margin-top: -150px;
* 思路二：left:0;top:0;right:0;bottom:0;margin:auto;
* */

div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); /* 平移 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

实例1:将内层div的文本垂直居中

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
</body>
</html>

实例2：将内层垂直居中、外层水平居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#content{
    width:300px;
    height:300px;
    border:#000 solid 1px;
    margin:auto;
    display:table;
}
#wenzi{
    border:#F00 solid 1px;
    text-align:center;
    display:table-cell;
    vertical-align: middle;
}
</style>
</head>
<body>
<div id="content">
<div id="wenzi">
锄禾日当午，<br>
汗滴禾下土。<br>
谁知盘中餐，<br>
粒粒皆辛苦。<br>
</div>
</div>
</body>
</html>

实例3: 使用绝对定位垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 220px;
    height: 280px;
    background: url("img/王思聪.jpg");
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -140px;
}
</style>
</head>
<body>
<!--
行内元素(文本)->水平垂直居中
text-align: center;
line-height: height;
-->
<!--
块元素->水平垂直居中
margin: 0 auto;
-->
<div></div>
</body>
</html>

实例4: 使用绝对定位垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 600px;
    height: 200px;
    padding: 10px 20px;
    border: 1px solid #000;
    border-radius: 5px;
    /* 下面这种写法也可以让一个盒子居中 */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>
</head>
<body>
<div>您确定删除：重庆万州公交坠江事件结果公布后，司乘纠纷和公交驾驶安全问题成为人们热议的焦点，如何预防和避免恶性结果的发生，才是问题的关键。“鼓励市民举报，并对勇于制止干扰公交车正常行驶违法行为的公民予以奖励。”昨日下午，西安市公安局公共交通分局召开媒体通气会，通报西安相关安全举措。这条消息吗</div>
</body>
</html>

绝对定位(固定定位)之后, 所有标准流的规则, 都不适用了。所以margin:0 auto; 失效。

解决办法：left:50%; margin-left:负的宽度的一半。（三句话）

div{
width: 600px;
height: 60px;
position: absolute;  /* → 第一句  */
left: 50%;   //   /*  → 第二句   */ 
top: 0;
margin-left: -300px;    /*→ 第三句。宽度的一半*/
}

实例4：使用绝对定位和margin:auto垂直居中

还在一个图片一个图片的设置居中对齐吗？WPS查找替换可以一键居中。

·打开素材文件，单击开始选项卡，单击查找按钮，向下的箭头单击替换。

·把光标放到查找内容这里，单击特殊格式下拉按钮，选择图形，把光标放到替换为这里。

·单击格式下拉按钮，选择段落，单击对齐方式下拉按钮，选择居中对齐，单击确定。

·单击全部替换，这个时候文档的20个图片就替换完成了。单击确定按钮，单击关闭。

你学会了吗？

在线咨询

上一篇：微信商城中购物车和订单表结构设计
下一篇：HTML5实现大文件分片上传思路

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

pdf图片页面如何居中到页面 #pitstop插件

您的项目需求