为了账号安全,请及时绑定邮箱和手机立即绑定

在CSS中将div居中

在CSS中将div居中

米脂 2019-12-12 10:10:28
我试图在此页面上将Newsslider(位于div底部容器中)居中:http://www.luukratief-design.nl/dump/parallax/index.html我已经有了 text-align: center;仍然不起作用。有什么建议么?
查看完整描述

3 回答

?
慕盖茨4494581

TA贡献1850条经验 获得超11个赞

在text-align: center;仅中心元素的在线内容,而不是元素本身。


如果它是一个块元素(一个div是),则需要设置margin: 0 auto;;否则,如果它是一个内联元素,则需要text-align: center;在其父元素上设置。


在margin: 0 auto;将设置上下页边距,以0左,右边距为auto(大小相同的),因此它自动将自身置于中心。仅当所讨论的块元素具有已知width(固定或相对)元素时,此方法才有效,否则它无法确定从何处开始和结束。



查看完整回答
反对 回复 2019-12-14
?
森栏

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>



查看完整回答
反对 回复 2019-12-14
?
德玛西亚99

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>



查看完整回答
反对 回复 2019-12-14
  • 3 回答
  • 0 关注
  • 435 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信