HTML - 並排放置頭文件

我似乎無法在同一行中將兩個頭文件放在一起。而且，我想將標題對齊到頁面的中心。HTML - 並排放置頭文件

需要幫助。

.inline-div { 
 
    display: inline; 
 
} 
 

 
h4 
 
{ 
 
    text-align: center; 
 
}

<div class="inline-div"> 
 
    <h4>Product Tested :</h4> 
 
    <h4>Profile Tested :</h4> 
 
</div>

來源

2017-09-15 cerberus99

這些被稱爲「標題」而不是「頭」，這是別的東西，比如''

。 – Rob

.inline-div { 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
h4 
 
{ 
 
    display: inline-block; 
 
    text-align: center; 
 
}

<div class="inline-div"> 
 
    <h4>Product Tested :</h4> 
 
    <h4>Profile Tested :</h4> 
 
</div>

來源

2017-09-15 02:58:09 zynkn

這應該工作：

.inline-div { 
 
    display: inline; 
 
} 
 

 
h4 
 
{ 
 
    text-align: center; 
 
    display: inline-block; 
 
}

<div class="inline-div"> 
 
    <h4>Product Tested :</h4> 
 
    <h4>Profile Tested :</h4> 
 
</div>

默認標題是顯示：塊;這意味着它們佔據整個行

來源

2017-09-15 02:57:23 TripWire

「標題」不是「標題」 – Rob

謝謝，已更新 – TripWire

.inline-div { 
 
    display: inline; 
 
    
 
} 
 

 
h4 
 
{ 
 
    text-align: center; 
 
    display: inline-block; 
 
}

<div class="inline-div"> 
 
    <h4>Product Tested :</h4> 
 
    <h4>Profile Tested :</h4> 
 
</div>

添加display: inline-block;到h4

.inline-div { 
    display: inline; 
} 

h4 
{ 
    text-align: center; 
    display: inline-block; 
} 

<div class="inline-div"> 
    <h4>Product Tested :</h4> 
    <h4>Profile Tested :</h4> 
</div>

來源

2017-09-15 02:58:34

這裏是一個也是第一個答案的另一個解決方案。

.inline-div { 
 
    display: table; 
 
    text-align:center; 
 
    width:100%; 
 
} 
 

 
h4 
 
{ 
 
    display:table-cell; 
 
    width:50%; 
 
}

<div class="inline-div"> 
 
    <h4>Product Tested :</h4> 
 
    <h4>Profile Tested :</h4> 
 
</div>

來源

2017-09-15 03:02:33

.flexbox{ 
 
    display:flex; 
 
    flex-flow: row nowrap; 
 
    justify-content:center; 
 
    align-content:center; 
 
    align-items:center; 
 
    width:100%; 
 
} 
 

 
.item{ 
 
    align-self:auto; 
 
    flex: 1 1 auto; 
 
    border: 1px solid black; 
 
    min-height:12px; 
 
    min-width:12px; 
 
    text-align:center; 
 
}

<div class="flexbox"> 
 
    <div class="item">a </div> 
 
    <div class="item">b </div> 
 
</div>

來源

2017-09-15 03:05:38

您可以使用下面的CSS的inline-div。 h4不需要額外的css。

.inline-div { 
    display: flex; 
    justify-content: center; 
}

<style type="text/css"> 
 
    .inline-div { 
 
    display: flex; 
 
    justify-content: center; 
 
    } 
 
</style> 
 

 
<div class="inline-div"> 
 
    <h4>Product Tested :</h4> 
 
    <h4>Profile Tested :</h4> 
 
</div>

來源

2017-09-15 03:06:09

HTML - 並排放置頭文件

回答

相關問題