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 关注
- 461 浏览
添加回答
举报