css處理水平居中問題
- WBOY原創
- 2016-09-05 08:45:351314瀏覽
1、水平居中設定-行內元素
透過父元素設定 1 text-align:center; ，讓父元素的內容居中
2、水平居中設定-定寬塊狀元素
塊狀元素的寬度width為固定值，透過設定「左右margin」值為「auto」來實現居中的
例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
div{
width: 200px;/*固定的宽度*/
margin: 20px auto;/*左右margin设置为auto*/
border: 1px solid red;
}
</style>
</head>
<body>
<div>我是定宽块状元素，我要水平居中显示。</div>
</body>
</html>
3、水平居中設定-不定寬塊狀元素
方法1. 加入 table 標籤
例：
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;">33dbd6eca5d5549327dcaa8ed8d3107b</span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;">0d3cc7583801e8d6e6907d4c7e87bf60</span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>不定宽块状元素水平居中<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span>
<span style="color: #008080;"> 7</span> <span style="background-color: #f5f5f5; color: #800000;">table</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0 auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">下面是任务区代码</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;">11</span> <span style="background-color: #f5f5f5; color: #800000;">.wrap</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">12</span> <span style="background-color: #f5f5f5; color: #ff0000;"> background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">13</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;">f23d86026244fffc3c9e7a86fab75cd5</span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;">fe290220f0dc5353c49a0552c2b18cd9</span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;">606b64bbc6f0c0260ee25260bf3e75fd88203afe6bd4dfdb2b1b0799cf0e13eb</span>
<span style="color: #008080;">20</span> <span style="color: #0000ff;">75529d1c38a265491928220a31bf685c</span>
<span style="color: #008080;">21</span> <span style="color: #000000;"> 我要水平居中
</span><span style="color: #008080;">22</span> <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #008080;">23</span> <span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f1908b3b1aec0ac546b8f40171196b4f6</span>
<span style="color: #008080;">24</span> <span style="color: #0000ff;">867cecdbca0fe0657de8e051234c2db6</span>
<span style="color: #008080;">25</span> <span style="color: #0000ff;">dc6fb698d5f346cc2f166c6140d50c2e</span>
<span style="color: #008080;">26</span>
<span style="color: #008080;">27</span> <span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #008080;">28</span> <span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>
方法2. 設定 display:inline; 方法，與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設定
例：
<span style="color: #0000ff;">33dbd6eca5d5549327dcaa8ed8d3107b</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
<span style="color: #0000ff;">0d3cc7583801e8d6e6907d4c7e87bf60</span>
<span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>不定宽块状元素水平居中<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span><span style="background-color: #f5f5f5; color: #800000;">
.container</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.container ul</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">list-style</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">none</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">inline</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.container li</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">margin-right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">8px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">inline</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
<span style="color: #0000ff;">b04f026226cff5a2aa6e2a4016f5fa27</span>
<span style="color: #0000ff;">a15f8999304d48fee6cdba3fb75b0af0</span>
<span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fccc7ab37c32f8c364fe53a2ba4d5afddb5</span>1<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e9a0dcfbb8f74d23e1e5829d29873faa4</span>
<span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fccc7ab37c32f8c364fe53a2ba4d5afddb5</span>2<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e9a0dcfbb8f74d23e1e5829d29873faa4</span>
<span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fccc7ab37c32f8c364fe53a2ba4d5afddb5</span>3<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e9a0dcfbb8f74d23e1e5829d29873faa4</span>
<span style="color: #0000ff;">76472038331ba440f7972f1d519f8dbe</span>
<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>
方法3. 設定 position:relative 與 left:50% 利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的
例：
<span style="color: #0000ff;">33dbd6eca5d5549327dcaa8ed8d3107b</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
<span style="color: #0000ff;">0d3cc7583801e8d6e6907d4c7e87bf60</span>
<span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>不定宽块状元素水平居中<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span>
<span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">下面是代码任务区</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #800000;">
.wrap</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
clear</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">both</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">left</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50%
</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.wrap-center</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
<span style="color: #008000;">566e7c080f5240cc8118de822b1c3db8</span>
<span style="color: #0000ff;">75529d1c38a265491928220a31bf685c</span>
<span style="color: #0000ff;">a051ed93a7b3c43e5622e1e29dfbba8f</span>我们来学习一下这种方法。<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>
ps:歡迎指正
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn