3 回答

TA貢獻1850條經驗 獲得超11個贊
在text-align: center;僅中心元素的在線內容,而不是元素本身。
如果它是一個塊元素(一個div是),則需要設置margin: 0 auto;;否則,如果它是一個內聯元素,則需要text-align: center;在其父元素上設置。
在margin: 0 auto;將設置上下頁邊距,以0左,右邊距為auto(大小相同的),因此它自動將自身置于中心。僅當所討論的塊元素具有已知width(固定或相對)元素時,此方法才有效,否則它無法確定從何處開始和結束。

TA貢獻1810條經驗 獲得超5個贊
text-align不應用于將塊元素居中。(IE6中除外,但這是一個bug)
您必須固定塊的寬度,然后使用margin:0 auto;
#block
{
width: 200px;
border: 1px solid red;
margin: 0 auto;
}
和
<div id="#block">Some text... Lorem ipsum</div>

TA貢獻1770條經驗 獲得超3個贊
使用text-align: center的容器,display: inline-block用于包裝的div,并display: inline為內容的div到具有跨瀏覽器的一個未定義的寬度水平中心內容:
<!doctype html>
<html>
<head>
<style type="text/css">
/* Use inline-block for the wrapper */
.wrapper { display: inline-block; }
.content { display:inline; }
.container { text-align:center; }
/*Media query for IE7 and under*/
@media,
{
.wrapper { display:inline; }
}
</style>
<title>Horizontal Centering Test</title>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
test text
</div>
</div>
</div>
</body>
</html>
- 3 回答
- 0 關注
- 503 瀏覽
添加回答
舉報