☰

水平線の中心に中央揃えのテキストを追加する [重複] 質問する

tag-icon • tag-icon html css xhtml line vertical-alignment
水平線の中心に中央揃えのテキストを追加する [重複] 質問する

次のようにテキストの両側に線を作成するために、xhtml 1.0 strict にどのようなオプションがあるか知りたいです。

セクション1
----------------------- 次のセクション -----------------------
セクション2

私は次のような派手なことをすることを考えました:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

あるいは、上記では位置合わせ（垂直と水平の両方）に問題があるため、次のようにします。

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

これには位置合わせの問題もありますが、私は次のようにして解決しました。

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

配置の問題に加えて、両方のオプションは「曖昧」な感じがします。以前にこれを見たことがあり、エレガントな解決策を知っている場合は、大変助かります。

ベストアンサー1

Flexbox が解決策です:

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}
<div class="separator">Next section</div>

最近ではすべてのブラウザがサポートしています必要に応じてそれぞれのベンダー プレフィックスを追加することで、10 年前のブラウザーとの互換性を確保できます。いずれにしても、適切に機能が低下します。

おすすめ記事