[解決済み】横罫線の中央に中央揃えテキストを追加する【重複あり
2022-04-04 05:02:23
質問
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%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
アライメントの問題に加えて、どちらのオプションも「ごまかし」感があります。
どのように解決するのか?
フレックスボックスが解決策です。
.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年前のブラウザとの互換性を確保することができます。いずれにせよ優雅に劣化していくことでしょう。
関連
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み] HTMLでSVGを使用して三日月を描画する
-
[解決済み] iFrameがURLを読み込んでいない
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] 入力のラジオ要素を水平に揃えるにはどうしたらいいですか?
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?
-
[解決済み] 画像をインラインで表示する方法
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] 横線の真ん中に文字がある場合のCSSテクニック
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】エラー。要求されたURL"[no URL]"は無効です。
-
[解決済み】WebページでWindows 95のフォントを使用する
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] iFrameがURLを読み込んでいない
-
[解決済み] ionic 4でion-buttonをセンタリングする方法は?[重複しています]
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] 横線の真ん中に文字がある場合のCSSテクニック