整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
直居中-父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設(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)標(biāo)簽, 同時設(shè)置vertical-align：middle。
說到豎直居中,css中有一個用于豎直居中的屬性vertical-align,但這個樣式只有在父元素為td 或th時,才會生效。所以又要插入table標(biāo)簽了。
下面看一下例子：
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標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(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>這種方法的好處是不用添加多余的無意義的標(biāo)簽,但缺點也很明顯,它的兼容性不是很好,不兼容 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>無標(biāo)題文檔</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">
鋤禾日當(dāng)午，<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>絕對定位(固定定位)之后, 所有標(biāo)準(zhǔn)流的規(guī)則, 都不適用了。所以margin:0 auto; 失效。
解決辦法：left:50%; margin-left:負(fù)的寬度的一半。（三句話）
div{
width: 600px;
height: 60px;
position: absolute; /* → 第一句 */
left: 50%; // /* → 第二句 */
top: 0;
margin-left: -300px; /*→ 第三句。寬度的一半*/
}實例4：使用絕對定位和margin:auto垂直居中
網(wǎng)站的布局是一個網(wǎng)站設(shè)計的根本，CSS的Grid布局已經(jīng)成為了未來網(wǎng)站布局的基本方式。
今天這篇文章我們通過圖文，一起看看如何自己實現(xiàn)Grid布局方式。
CSS
首先我們看看最基本的Grid布局是什么樣的，HTML頁面的代碼如下所示。
HTML代碼
然后設(shè)置其CSS屬性，這里主要展示容器的CSS屬性，給子元素添加的color屬性就不在這里展示了。
CSS屬性
在頁面上看到的效果如下，目前因為沒有對子div元素做任何設(shè)置，會自動將子div沿垂直方向排列。
頁面效果
為了讓外層的div(wrapper)為一個網(wǎng)格容器，需要設(shè)置其行數(shù)和列數(shù)，就像一個表格一樣。
此時就需要用到grid-template-columns和grid-template-rows兩個屬性值。
grid-template-columns
用于設(shè)置網(wǎng)格容器的列屬性，其實就相當(dāng)于列的寬度。當(dāng)我們需要幾列展示時，就設(shè)置幾個值，這個屬性可以接收具體數(shù)值比如100px，也可以接收百分比值，表示占據(jù)容器的寬度。
需要注意的是：當(dāng)給容器設(shè)定了寬度時，grid-template-columns設(shè)定的百分比值是以容器的寬度值為基礎(chǔ)計算的。如果未設(shè)置寬度時，會一直向上追溯到設(shè)置了寬度的父容器，直到body元素。
比如我們設(shè)置了以下的CSS屬性。
CSS屬性
可以看出三列寬度加起來的百分比值為120%，而且wrapper容器并未設(shè)置寬度，會一直向上追溯到body元素，這樣三列的總寬度已經(jīng)超過了body的寬度，因此會出現(xiàn)滾動條。
頁面效果
grid-template-rows
用于設(shè)置網(wǎng)格容器的行屬性，其實就相當(dāng)于行的高度，其特性與grid-template-columns屬性類似。
下面簡單修改grid-template-columns和grid-template-rows兩個屬性的值。
CSS值
得到的效果圖如下所示。
效果圖
接下來我們看看別的情況，通過CSS屬性設(shè)置3*3的網(wǎng)格。
CSS屬性
在頁面上的呈現(xiàn)方式如下所示。
頁面呈現(xiàn)
從頁面上看我們看不出有什么問題，但是打開控制臺后可以發(fā)現(xiàn)，這個網(wǎng)格已經(jīng)占據(jù)了3*3的空間。它后面的元素只能排列在所有的網(wǎng)格后面。
頁面實際情況
當(dāng)我們需要得到特殊的排列方式，比如占滿整行，占滿整列，二三行合并等等。
這就需要用到grid-column和grid-row屬性，表示行網(wǎng)線和列網(wǎng)線的序號。通過設(shè)置start和end值，來進(jìn)行網(wǎng)格的合并。
網(wǎng)線序號
我們重新給wrapper容器內(nèi)部的div添加class類。
HTML代碼
然后添加以下的CSS代碼，給不同的網(wǎng)格特定的行號和列號。
CSS代碼
最終得到的效果圖如下所示。
頁面效果圖
今天這篇文章介紹了CSS中Grid布局的基礎(chǔ)知識，應(yīng)該可以很快掌握，其他的復(fù)雜點的網(wǎng)格布局大家也可以自己去嘗試。
做不是響應(yīng)式的網(wǎng)頁中，根據(jù)各自的需求，一般都給網(wǎng)頁設(shè)定一定的版心，有時會遇到下面這個問題！
有一個通欄的100%上有背景色的DIV，然后版心設(shè)置1200px居中顯示內(nèi)容，當(dāng)這網(wǎng)頁隨著瀏覽器窗口縮小后，縮小到出現(xiàn)橫向滾動條，然后往右拉滾動條的話，這個含有背景色的DIV就會出現(xiàn)留白空隙！今天就來說說如何解決該問題！
先舉個例子：
縮小瀏覽器出現(xiàn)滾動條后效果圖：
把橫向滾動條向右拉，超出視口的部分丟失了背景色：
解決方法：
在外層div上面設(shè)置min-width: 1200px;即可解決
外層div的寬度是100%，就是視口的大小，當(dāng)視口被拉窄到小于內(nèi)層div的寬度1200px時，比如800px，此時外層div寬度為800px，內(nèi)層div寬度依然為1200px，而css中只設(shè)置了外層div有背景色，所以說只有800px那一部分會顯示背景色，而超出視口的部分是屬于內(nèi)層div的，內(nèi)層沒有設(shè)置背景色，所以是空白！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
