帶有對齊中心的css內聯塊

Question

我想要一個與內容具有相同寬度的div，由display: inline-block;
但是當我使用它時， text-align: center不再工作了。
所以我的內容只是左轉，內聯塊適用於它。
像這樣：

#div1 {
position: relative;
bottom: 10px;
left: auto;
text-decoration: overline underline;
display: inline;
text-align: center;
}

它不再以div的文本為中心。
我怎么能得到這兩個效果？

Answer 1

將屬性text-align：center賦予任何其他元素，並在div中使用該元素。

例如。

#div1 {
position: relative;
bottom: 10px;
left: auto;
text-decoration: overline underline;
display: inline;
}
#p1 {
text-align: center;
}

接着

<div id="div1">
        <p id="p1">blah blah blah</p>
</div>

這應該工作。

Answer 2

獲得相同的div是width不display的工作。 使用text-align此屬性時，將應用於元素的所有子元素。

例如，在

<div>
 <span>Text</span>
 Text
</div>

span {
  text-align: center;
}

這將應用於文本，而不是跨度。 這樣，您將獲得與中心對齊的文本，但是跨度仍將位於其自己的位置， left和前一個元素下方作為默認值。

要檢查是否正在應用text-align ，您可以嘗試在Developer Tools中檢查子項的屬性。

Jsfiddle： http ： //jsfiddle.net/afzaal_ahmad_zeeshan/eKrNt/

您可以看到，該屬性已應用於div ，而不是自身。 是那個與中心對齊的孩子。

你的代碼：

#div1 {
 position: relative;
 bottom: 10px;
 left: auto;
 text-decoration: overline underline;
 display: inline;
 text-align: center;
}

這是一個明確的答案，您將此div中的文本與中心對齊。

鼠標懸停事件必須位於函數或腳本中的某個位置。 這是在hover事件或相同的情況下觸發的。

Answer 3

試着用這個：

margin-left:auto;
margin-right:auto;

在你想要居中的div的父div中。