2011-04-14 120 views
4

我想中心揚聲器div,這是審查div。我似乎無法得到它的工作。 :(css中心div無法正常工作

HTML:

<div class="review"> 
<div class="speaker"> 
<p>SPEAKER DIV</p> 
</div> 
</div> 

CSS:

.speaker{ 
align:center; 
} 

這不起作用:/

回答

0

嘗試

.speaker p{ 
text-align:center; 
} 

.speaker { 
text-align:center; 
} 
8

有沒有這樣的CSS屬性align

當你說你想「集中」發言者div,你到底是什麼意思?

可以居中對齊其文本這樣的:

.speaker { 
    text-align:center; 
} 

(見http://jsfiddle.net/pauldwaite/X7LN5/

或者,如果你想要的揚聲器的div只一樣寬,它的文字,被定位在審查div的中心,那麼你需要使用:

.review { 
    text-align:center; 
} 

.speaker { 
    display:inline-block; 
} 

(見http://jsfiddle.net/wxha4/

0

有一個在CSS沒有align屬性。將水平邊距設置爲自動以將塊居中。有關詳細信息,請參閱Centring using CSS(包括解決Internet Explorer問題)

7

給它一個寬度和邊距:0 auto;

<div class="review"> 
    <div class="speaker"> 
     <p>SPEAKER DIV</p> 
    </div> 
</div> 

div.speaker{ 
    background-color:red; 
    width:100px; 
    margin:0 auto; 
} 

See it in action!

1

我大約一年遲到了,但這裏有雲:

在大多數瀏覽器,這將工作:

.speaker{ 
    margin: 0 auto; 
} 

然而,在IE8和下面,margin:auto將無法​​正常工作(只有在沒有!DOCTYPE聲明的情況下才能使用IE8。See W3Schools Horizontal-Align Tutorial

在這種情況下,可以使用的text-align: centerwidth的組合,以獲得所需的效果:

.review{ 
    text-align:center; 
} 
.speaker{ 
    text-align:left; 
    width:200px; 
    margin:0 auto; 
} 

這樣做的缺點的方法是,必須聲明的寬度,或它贏得」以中心爲中心。

祝你好運!

1

它完美的工作。

.speaker{ 
margin: 0 auto; 
text-align:center; 
width:100%; 

}

好運