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 - 并排放置头文件

回答

相关问题