テキストの両側に水平線を描くための 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タグはウェブページ制作において適切に使用すべきである
推薦する
シンプルなフロントエンドのページング効果を実現する js
比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインの...
Docker 入門インストールチュートリアル (初心者版)
ドクター紹介: Docker はコンテナ関連の技術です。簡単に言うと、さまざまなソフトウェアを実行で...
js のループメソッドとさまざまなトラバーサルメソッド
目次forループwhileループdo-while ループループのネストトラバーサルメソッド～のために...
mysqlはコンマに基づいてデータ行を複数の行に分割します
目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...
IE8でラベルの背景画像が表示されない問題の解決方法
今日、ちょっとした問題に遭遇し、長い間苦労しました。そのことを皆さんにシェアしたいと思います。 a ...
MySQL マスタースレーブレプリケーションスレッドの状態遷移に関する詳細な理解
序文MySQL マスター スレーブ レプリケーションの基本原理は、スレーブ データベースがマスター ...
データベースの冗長フィールドを合理的に使用する方法
privot は、多対多の関係の中間テーブルです。 PT5 フレームワークは自動的に privot ...
MySQL の pid とソケットの詳細な説明
目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...
PHP+nginx サービス 500 502 エラーのトラブルシューティングのアイデアの詳細な説明
概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...
Antd+vueは円形属性フォームの動的検証のアイデアを実現します
必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...
JS でオブジェクト プロパティを簡単にトラバースするいくつかの方法
目次1. 自己列挙可能なプロパティ2. Object.values()はプロパティ値を返します3. ...
CentOS での mysql5.7 の詳細なインストールと設定のチュートリアル
インストールユーザーにインストール権限があることを確認してくださいルートスイッチなしsuルート(su...
JavaScript プロトタイプの詳細
目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...
MySQL の自動増分 ID に関するいくつかの小さな問題の要約
以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...
Firefox の CSS を使用してデータを盗む
0x00 はじめに数か月前、Firefox に脆弱性 (CVE-2019-17016) があること...