テキストの両側に水平線を描くための CSS のサンプルコード

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さんと共有します。具体的な注意事項は次のとおりです。

効果:

<!doctypehtml>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="ビューポート"
          コンテンツ="幅=デバイス幅、ユーザースケーラブル=いいえ、初期スケール=1.0、最大スケール=1.0、最小スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        。タイトル{
            テキスト配置: 中央;
            位置: 相対的;
            高さ: 50px;
            行の高さ: 50px;
            幅: 800ピクセル;
            マージン: 200px 自動;
        }
        .title:後、.title:前{
            コンテンツ: "";
            位置: 絶対;
            上位: 50%;
            背景: #7a7a7a;
            高さ: 1px;
            幅: 35%;
        }
        .title:後{
            左: 0;
        }
        .title:前{
            右: 0;
        }
    </スタイル>
</head>
<本文>
    <div class="title">テキストの中央の両側に水平線を表示する効果を実現する CSS</div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Dockerコンテナイメージからコードを復元する手順

>>:  Hタグはウェブページ制作において適切に使用すべきである

推薦する

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

Flinkのフォールトトレラントメカニズムに関する簡単な説明:ジョブ実行とデーモン

目次1. ジョブ実行のフォールトトレランス1.1 タスクフェイルオーバー戦略1.2 ジョブ再開戦略2...

CentOS6.8 中国語/英語環境切り替えチュートリアル図

1. はじめに英語に慣れていない人は、システムを英語から中国語に変更したいかもしれません。一方、クラ...

Linux プラットフォームでの Zabbix エージェントのインストールと設定方法

ここでは、Linux プラットフォームでの Zabbix エージェントのインストールと構成について簡...

絵文字と問題解決のためのMySQL/Javaサーバーサポートの詳細な説明

この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

Access_Tokenの統合管理を実現するミニプログラム開発

目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...

JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...

MySQLにおけるrow_numberの実装プロセス

1. 背景一般的に、データ ウェアハウス環境では、row_number 関数を使用して特定のディメン...

MySqlのインストールとログインの詳細な説明

LinuxにMySQLがすでにインストールされているかどうかを確認する sudo service m...

JavaScript ファクトリーパターンの説明

目次シンプルファクトリーファクトリーメソッド安全な工場方法アブストラクトファクトリー要約するシンプル...

JavaScript の基本変数

目次1. 変数の概要1.1 変数のメモリへの保存1.2 変数の使用1. 変数を宣言する2. 譲渡3....

MySQL で null を置き換える IFNULL() および COALESCE() 関数の詳細な説明

MySQLではisnull()関数をnull値の代わりとして使用することはできません。次のように:ま...

div が contentEditable=true に設定されている場合、コンテンツをリセットした後にカーソルを配置することはできません。

最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...

Windows 10でDockerコンテナのポートにアクセスできない問題に対する完璧な解決策

Windows 10 で Docker コンテナのポートにアクセスできない問題を解決する (ポート ...