在CSS中将div居中

3回答

慕盖茨4494581

在text-align: center;仅中心元素的在线内容，而不是元素本身。如果它是一个块元素（一个div是），则需要设置margin: 0 auto;；否则，如果它是一个内联元素，则需要text-align: center;在其父元素上设置。在margin: 0 auto;将设置上下页边距，以0左，右边距为auto（大小相同的），因此它自动将自身置于中心。仅当所讨论的块元素具有已知width（固定或相对）元素时，此方法才有效，否则它无法确定从何处开始和结束。

0 0

森栏

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>

0 0

德玛西亚99

使用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>

0 0