Question

我似乎无法将两个标题放在同一行中。而且，我想将标题对齐到页面的中心。

需要帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这应该有效：

＆＃13;

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

＆＃13;

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

＆＃13;

默认显示标题：block;这意味着他们占据整条线

Answer 2

＆＃13;

SELECT c.EmailAddress, oi.OrderID, (oi.ItemPrice * oi.Quantity) - 
oi.DiscountAmount
FROM Customers c JOIN Orders o ON c.CustomerID = o.CustomerID
                 JOIN OrderItems oi ON o.OrderID = oi.OrderID
GROUP BY c.EmailAddress, oi.OrderID

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

将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>

Answer 4

这也是第一个答案的不同解决方案。

.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>

Answer 5

您可以将以下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>

Answer 6

.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>

HTML - 并排放置标题

6 个答案: