亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在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 關注
  • 503 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號