猿问

在CSS中将div居中

我试图在此页面上将Newsslider(位于div底部容器中)居中:


http://www.luukratief-design.nl/dump/parallax/index.html


我已经有了 text-align: center;


仍然不起作用。


有什么建议么?


江户川乱折腾
浏览 435回答 3
3回答

米脂

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

大话西游666

text-align不应用于将块元素居中。(IE6中除外,但这是一个bug)您必须固定块的宽度,然后使用margin:0 auto;#block{&nbsp; &nbsp;width: 200px;&nbsp; &nbsp;border: 1px solid red;&nbsp; &nbsp;margin: 0 auto;}和<div id="#block">Some text... Lorem ipsum</div>

慕容3067478

使用text-align: center的容器,display: inline-block用于包装的div,并display: inline为内容的div到具有跨浏览器的一个未定义的宽度水平中心内容:&nbsp; &nbsp; <!doctype html>&nbsp; &nbsp; <html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; <style type="text/css">&nbsp; &nbsp; /* Use inline-block for the wrapper */&nbsp; &nbsp; .wrapper { display: inline-block; }&nbsp; &nbsp; .content { display:inline; }&nbsp; &nbsp; .container { text-align:center; }&nbsp; &nbsp; /*Media query for IE7 and under*/&nbsp; &nbsp; @media,&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; .wrapper { display:inline; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; &nbsp; <title>Horizontal Centering Test</title>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test text&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </body>&nbsp; &nbsp; </html>
随时随地看视频慕课网APP
我要回答