水平对齐h3和h5

时间:2018-03-20 16:13:06

标签: html css twitter-bootstrap twitter-bootstrap-4

我正在尝试使用引导程序将h3标题与我的h5对齐,以便它们彼此一致。

修改 我试图使用已经可用的引导程序,并且除非绝对必要,否则不要更改css。

这是一个展示我的意思的屏幕。 enter image description here

E.g。名字应与地址1对齐,姓氏与地址2等对等。

这是我的代码。

<div class="row ">
  <div class="col-md-4 ">
      <h3>First Name</h3>
      <h3>Last Name</h3>
      <h3>Week.</h3>
      <h3>Code.</h3>
  </div>
  <div class="col-md-4 ">
      <h5>Address 1</h5>
      <h5>Address 2</h5>
      <h5>Address 3</h5>
      <h5>Country</h5>
  </div>
</div>

3 个答案:

答案 0 :(得分:3)

这不是标题的用途。 (语义错误,搜索引擎不喜欢这个)

我建议只使用一个表(它是表格数据),并为td:first-childtd:nth-child(2)使用不同的CSS规则,以获得不同的字体大小。

.x {
  width: 100%;
}
.x td {
  padding: 10px;
  font-family: sans-serif;
  font-weight: light;
}
.x td:first-child {
  font-size: 24px;
  width: 60%;
}
.x td:nth-child(2) {
  font-size: 16px;
  width: 40%;
}
<table class="x">
  <tr>
    <td>First Name</td>
    <td>Address 1</td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td>Address 2</td>
  </tr>
  <tr>
    <td>Week.</td>
    <td>Address 3</td>
  </tr>
  <tr>
    <td>Code.</td>
    <td>Country</td>
  </tr>
</table>

答案 1 :(得分:1)

最好不要混淆h3 / h5高度,而是使用多个row代替。例如。如果其中一个文本变得太长以至于它包装了怎么办?然后你可以跟你对齐的布局说再见。如果您使用多个row s:

,这将永远不会发生
<div class="row">
  <div class="col-md-4">
      <h3>First Name</h3>
  </div>
  <div class="col-md-4">
      <h5>Address 1</h5>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
      <h3>Last Name</h3>
  </div>
  <div class="col-md-4">
      <h5>Address 2</h5>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
      <h3>Week.</h3>
  </div>
  <div class="col-md-4">
      <h5>Address 3</h5>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
      <h3>Code.</h3>
  </div>
  <div class="col-md-4">
      <h5>Country</h5>
  </div>
</div>

除此之外:我同意其他人的说法,即你不应该首先使用h3 / h5。标题用于定义文本逻辑单元之间的关系,因此<h5>是文本章节中由<h3>标记开头的文本的子子部分的标题。

答案 2 :(得分:0)

在css样式中为h3&amp; h5设置相同的行高,边距和填充