css - vertical - margin center




在CSS中居一個div (7)

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>

我正在嘗試將newsslider(在div底部容器中)放在此頁面上:

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

我已經有了text-align: center;

它仍然無效。

有什麼建議麼?


text-align: center; 僅將元素的內聯內容居中,而不是元素本身。

如果它是一個元素div是),則需要設置margin: 0 auto; ,如果是內聯元素 ,則需要設置text-align: center; 而在其父元素上。

margin: 0 auto; 將頂部和底部邊距設置為0 ,將左右邊距設置為auto (相同尺寸),以便自動將其置於中心位置。 這僅在所討論的塊元素具有已知width (固定或相對)時才有效,否則無法確定開始和結束的位置。


使用text-align: center作為容器, display: inline-block表示包裝器div, display: inline表示內容div為橫向居中的內容,瀏覽器的寬度不確定:

    <!doctype html>
    <html lang="en">
    <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>

創建一個包含單行和三列的表,將左右寬度設置為100%,然後中間的一個自動居中


嘗試將此添加到樣式中。

margin-left: auto;

嘗試這個:

#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
float:none;
height:137px;
margin:0 auto;
padding-top:14px;
width:296px;
}

這應該將div放在你的頁腳中心。


提供寬度,並放置適當的DOCTYPE,

嘗試這個:

 Margin-left: auto;
 Margin-right: auto;

希望這可以幫助





center