HTML 水平對齊 DIV 子項

Question

我是 HTML 和 CSS 開發的新手。 我希望我的 div 父級中的所有子級水平對齊

我的HTML：

<div class="parent">
        <h1>Hello</h1>
        <h1>World</h1>
</div>

我嘗試像其他人建議的那樣在.parent上使用inline-block ，但 output 仍然是：

Hello
World

反而

Hello World

有任何想法嗎？

Answer 1

您要查找的屬性是display: inline; 這將使每個標記呈現為“相互內聯”。

.parent h1 {
    display: inline;
}

你也可以浮動標簽，但我會避免這樣做，因為如果要在.parent容器中添加任何其他標簽，它會破壞文本流。

示例JSfiddle

Answer 2

考慮一下float:left 。

 .parent h1 { float:left; } 

 <div class="parent"> <h1>Hello</h1> <h1>World</h1> </div> 

甚至display:inline

 .parent h1{ display:inline; } 

 <div class="parent"> <h1>Hello</h1> <h1>World</h1> </div> 

請記住，此處不建議使用float ，因為如果向.parent div添加新元素，它將出現在h1元素旁邊，因為它們是左浮動的。 +1指向@MathiasaurusRex指出這一點。

Answer 3

另一種方法如下：

 .parent { display: flex; flex-direction: row; }

 <div class="parent"> <h1>Hello</h1> <h1>World</h1> </div>

Answer 4

您不需要對齊div，但需要對齊h1：在CSS代碼中添加：

h1 { display: inline; } h1 { display: inline; } 小提琴這里

Answer 5

這里要注意的一件事是你選擇的標簽h1 for children是錯誤的，header在標題之前和之后插入一個空行。 因為你的動機只是顯示一些文本標題標簽不是正確的標簽選擇。