如何使用css來設(shè)置居中

發(fā)布時(shí)間：2022-03-05 09:05:34 來源：億速云閱讀：203 作者：小新欄目：web開發(fā)

這篇文章主要介紹如何使用css來設(shè)置居中，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在DIV CSS構(gòu)造的頁面里，從機(jī)關(guān)形式到頁面里文章文字居中都黑白常重要的，而css來配置居中也好壞常簡單的。

1、起首簡介運(yùn)用css屬性讓整體組織的居中：
配置對象的父級形式居中，這里一個(gè)頁面的為父級是什么呢？我們或是構(gòu)想整個(gè)頁面的形式是由<html></html>與<body></body>這兩個(gè)囊括，那依照較近父級我們就設(shè)置裝備擺設(shè)body的CSS來完成居中問題，能夠向在形式里居中有text-align:center;具體css的居中代碼為：
body{text-aligh:center; } 然而即便這樣也會呈現(xiàn)標(biāo)題，由于你沒有配置機(jī)關(guān)有多寬“width ”，一旦你形式構(gòu)造中在最外層css牽制中，配置了float:屬性，那組織將會向你設(shè)置的float:傾向靠，規(guī)劃辦法，除了配置body的居中的css屬性外，還需對機(jī)關(guān)對象配置居中，何況或界說寬度是多少，要是網(wǎng)頁寬度為700px，最外層css格局為的class="weicheng"，那設(shè)置應(yīng)當(dāng)多么“.weicheng{margin:0 auto; width:700px;} ”即可而這個(gè)元素在IE下有效，通過試驗(yàn)在火狐等涉獵器下只除了此父級（body）設(shè)置裝備擺設(shè)text-aligh:center;居中是沒法讓布局居中，那我們還需要對該對象配置個(gè)“margin:0 auto ; ”這個(gè)是甚么含意呢，含義是模式上下為0隔絕距離，而左右為“auto ”踴躍，何等就能設(shè)置裝備擺設(shè)實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)居中(這里設(shè)置margin:5px auto; 異樣成績不影響實(shí)驗(yàn))。完整實(shí)例為（可將代碼拷貝新建html文件涉獵傍觀功效）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css5.com.cn的CSS div的結(jié)構(gòu)居中實(shí)例</title>
<style type="text/css">
<!--
body{ text-align:center; }
.waicheng {color: #0066CC; margin:5px auto; width:700px; height:200px; border:1px solid #000000;}
-->
</style>
</head>
<body>
<div class="waicheng">我是css中的居中的執(zhí)行;我的機(jī)關(guān)外層有一個(gè)邊為1px玄色邊，我寬700px，高為200px,設(shè)置了與頂部模式隔絕距離為5PX</div>
</body>
</html>

CSS組織居中實(shí)例瀏覽

2、簡介使用css屬性讓網(wǎng)頁的布景居中：這里居中就包括了擺布居中與高低居中，居中代碼以下： body{BACKGROUND: #FFF url(//www.css5.com.cn/img/css-logo.gif） no-repeat center;} //這段話含意便是讓css-logo.gif這個(gè)圖片配置布景不反復(fù)（no-repeat ），并將居中（center）這個(gè)居中是支配居中，而垂直不需要設(shè)置裝備擺設(shè)，積極會居中。

3、css讓介紹翰墨、圖片內(nèi)容左右高下居中方式教程：我們曉得擺布就中好辦，直接用text-align:center; 即梗概讓筆墨與圖片形式居中，可是垂直呢，要是咱們在高度為120px的高度下垂直居中，圖片居中是vertical-align:middle;css屬性，筆墨居中就要靠設(shè)置行高辦法居中翰墨模式，這里咱們設(shè)置裝備擺設(shè)為120px的高度這需要設(shè)置個(gè)line-height:120px;多么就通過css屬性類格式來實(shí)現(xiàn)筆墨與圖片的高下左右居中。整個(gè)站點(diǎn)居中的代碼下列：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css5.com.cn的CSS div的殘破居中實(shí)例</title>
<style type="text/css">
<!--
body{ text-align:center; margin:0 auto; bac千克round:url(//www.css5.com.cn/img/css-logo.gif) no-repeat center;}
.waicheng {color: #0066CC; margin:5px auto; width:700px; height:120px; line-height:120px; border:1px solid #000000; }
.waicheng img {vertical-align:middle;}
-->
</style>
</head>
<body>
<div class="waicheng">我是css中的居中的殘缺居中實(shí)例; 我的布局外層有一個(gè)邊為1px <img src="//www.css5.com.cn/img/css-logo.gif" alt="圖片內(nèi)容居中" /></div>
</body>
</html>

以上是“如何使用css來設(shè)置居中”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

如何使用css來設(shè)置居中

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽