居中標籤

Question

我有一個div與一些文本內部和絕對位置。我可以設置左側或右側，但有沒有辦法設置中心，所以Div的文本會向兩個方向擴展。

到目前爲止，我只能考慮創建極其長的div並將文本居中。

Answer 1

如果您的div絕對定位，您可以簡單地將其設置爲left屬性，以使其居中。

例子：

HTML：

<div class="outer"> 
    <div class="inner">Some text...</div> 
</div> 

CSS：

.outer { 
    position: relative; 
    width: 900px; 
} 
.inner { 
    position: absolute; 
    width: 500px; 
    top: 0; 
    left: 200px; 
} 

---

如果您不知道內部元件的寬度，你」將不得不依靠JavaScript。

下面是使用jQuery的例子：

var $el = $('.inner'); 

$el.css('left', 
    ($el.parent().width() - $el.width())/2 
); 

和這裏的小提琴：http://jsfiddle.net/aa93G/。利用.inner中的文字進行遊戲，您將看到文字保持居中。

Answer 2

• 集中內部文本和內聯元素在父元素中使用text-align: center。
• 如果你正在處理塊元素，你應該在元素本身中使用margin: auto。但是你必須首先爲元素設置一個寬度，否則它將佔據父級的整個寬度。