pdf圖片頁面如何居中到頁面 #pitstop插件

何使pdf頁面中的圖像居中？

大家好，我是老張。之前的視頻中我教過大家如何使用九宮格來移動pdf頁面，使其位于頁面正中央。然而，有些粉絲按照我的方法操作后發(fā)現(xiàn)頁面并沒有居中，問我該怎么辦？

首先，我要提醒大家，如果你要編輯或修改pdf文件，必須了解其對象類型。pdf文件有兩種對象類型：矢量文件和圖像文件。如果你對這些對象類型不熟悉，或者想使用pdf中的自動插件，建議在我的主頁上學(xué)習(xí)一下我的自動操作基礎(chǔ)。

現(xiàn)在，使用pdf的基礎(chǔ)選擇命令，選擇其中的對象。如果顯示為圖像對象，那么這些都是圖像對象。注意，這些圖像對象中有空白區(qū)域，還有圖像外部的空白區(qū)域。如果使用九宮格移動來移動圖像，會出現(xiàn)什么情況呢？

九宮格移動命令可以將圖像按照九宮格的位置進行擺放，默認情況下水平和垂直都居中。點擊確定后，圖像居中了，但頁面中的內(nèi)容并未居中。點擊圖像查看，圖像只是居中了，但圖像中的內(nèi)容并未位于文件中央。

因此，我們需要使用另一個動作——智能修圖。使用智能修圖可以處理所有對象，使其位于頁面中央，忽略白色區(qū)域。首先，使用智能修圖，點擊運行，這里使用默認設(shè)置即可。水平和垂直默認居中，也可以單獨選擇。點擊ok，所有內(nèi)容都居中了。

現(xiàn)在還有一個問題，即每個頁面的頁碼位置沒有在同一水平線上，只是圖像上下左右居中了。如果想讓頁碼在同一水平線上，該怎么辦呢？只有在使用智能修圖居中后才能使用九宮格移動。因為使用對象選擇選擇對象時，它們會出現(xiàn)一個矩形框，只有在有內(nèi)容的地方才會出現(xiàn)。現(xiàn)在，使用九宮格移動，如何讓頁碼在同一水平位置？只需將上中下對齊，然后按下邊對齊，左邊和右邊，不要管它，讓它在中間就可以了。

按下邊對齊后，如果直接點擊ok，頁碼會對齊到頁面底部，因此可以微調(diào)一下，向上移動一些，移動多少呢？比如將頁邊距設(shè)為25毫米，然后向上調(diào)整25毫米，這樣就可以點擊“確定”了。這樣所有頁面的下邊緣都會與頁面邊緣保持25厘米的距離。現(xiàn)在可以看到，下邊緣已經(jīng)對齊，而上邊緣還有一些空白。如果需要上下邊緣的大小一致，可以再次進行調(diào)整。

再次使用“對齊”命令，將下邊緣調(diào)整為對齊狀態(tài)，上邊緣剛才留了25毫米似乎留少了，可以將其調(diào)整為35毫米，然后測量一下上邊緣和下邊緣的空白，然后根據(jù)實際情況自行計算留白的大小，這樣就可以讓上下邊緣都對齊了。這樣就完成了設(shè)置。

直居中-父元素高度確定的單行文本

父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的height和line-height高度一致來實現(xiàn)的。如下代碼：

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

css代碼：

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

垂直居中-圖片以及行內(nèi)塊元素

<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)標簽, 同時設(shè)置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標簽?zāi)J情況下就默認設(shè)置了vertical-align為middle, 所以我們不需要顯式地設(shè)置了。

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

在chrome、firefox及IE8以上的瀏覽器下可以設(shè)置塊級元素的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:將內(nèi)層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>
<!--下面是代碼任務(wù)區(qū)-->
</body>
</html>

實例2：將內(nèi)層垂直居中、外層水平居中

<!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>
<!--
行內(nèi)元素(文本)->水平垂直居中
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>您確定刪除：重慶萬州公交墜江事件結(jié)果公布后，司乘糾紛和公交駕駛安全問題成為人們熱議的焦點，如何預(yù)防和避免惡性結(jié)果的發(fā)生，才是問題的關(guān)鍵。“鼓勵市民舉報，并對勇于制止干擾公交車正常行駛違法行為的公民予以獎勵。”昨日下午，西安市公安局公共交通分局召開媒體通氣會，通報西安相關(guān)安全舉措。這條消息嗎</div>
</body>
</html>

絕對定位(固定定位)之后, 所有標準流的規(guī)則, 都不適用了。所以margin:0 auto; 失效。

解決辦法：left:50%; margin-left:負的寬度的一半。（三句話）

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

實例4：使用絕對定位和margin:auto垂直居中

還在一個圖片一個圖片的設(shè)置居中對齊嗎？WPS查找替換可以一鍵居中。

·打開素材文件，單擊開始選項卡，單擊查找按鈕，向下的箭頭單擊替換。

·把光標放到查找內(nèi)容這里，單擊特殊格式下拉按鈕，選擇圖形，把光標放到替換為這里。

·單擊格式下拉按鈕，選擇段落，單擊對齊方式下拉按鈕，選擇居中對齊，單擊確定。

·單擊全部替換，這個時候文檔的20個圖片就替換完成了。單擊確定按鈕，單擊關(guān)閉。

你學(xué)會了嗎？

在線咨詢

上一篇：微信商城中購物車和訂單表結(jié)構(gòu)設(shè)計
下一篇：HTML5實現(xiàn)大文件分片上傳思路

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

pdf圖片頁面如何居中到頁面 #pitstop插件

您的項目需求