CSSスタイル設定-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSスタイル設定

高洛峰

Oct 29, 2016 am 11:25 AM

css

1. 水平方向のセンタリング設定

インライン要素のセンタリング設定: 設定した要素がテキストやピクチャなどのインライン要素の場合、親要素に text-align:center を設定することで水平方向のセンタリングを実現します。コード例は以下の通りです。

HTML代码
<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
CSS代码
<style>
  .txtCenter{
    text-align:center;
  }
</style>

固定幅ブロック要素の中央揃え設定: 固定幅とブロックの2つの条件を満たす要素は、「左右マージン」の値を「自動」に設定することで中央揃えにすることができます。コード例は次のとおりです:

HTML代码
<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
CSS代码
<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

可変幅ブロック要素の中央設定:

table タグの追加では、table タグの長さの適応性を利用します。つまり、長さは定義されません。また、デフォルトでは親要素の本体の長さにはなりません（テーブルの長さはその中のテキストの長さによって決まります）。そのため、固定幅のブロック要素と見なすことができ、次に固定幅のブロックと見なすことができます。 -centered margin メソッドを使用して水平方向に中央揃えにします。コード例は次のとおりです。

HTML代码
<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
CSS代码
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

2. display: inline メソッドを設定します。ブロックレベル要素の表示を inline タイプに変更し (インライン要素を表示するように設定します)、text-align:center を使用して実現します。センタリング効果。コードは次のとおりです:

HTML代码
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
CSS代码
<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

3. Position:relative と left:50% を設定します: 親要素に float を設定し、親要素にposition:relative と left:50% を設定し、position:relative と left を設定します。 : 子要素の -50 は、水平方向の中央揃えを実現します。コードは以下の通りです:

HTML代码
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
CSS代码
<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

2. 縦方向中央揃えの設定

高さが親要素で決まる1行のテキスト:

高さが親要素で決まる1行のテキストを縦方向中央揃えにする方法親要素の高さと行の高さが一致するように設定することです。 (高さ: 要素の高さ、行の高さ: 名前が示すように、行の高さ (行間隔) はテキスト内の行間のベースライン間の距離を指します)。コードは次のとおりです:

HTML代码
<div class="container">
    hello, world!
</div>
CSS代码
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

親要素の特定の高さの複数行テキスト:

1. insert table (tbody、tr、td を含む) タグを使用し、vertical-align: middle を設定します。 CSS には、vertical-align と呼ばれる垂直方向の中央揃え用の属性があり、親要素がこのスタイルを設定すると、すべてのインラインブロックタイプの子要素に役立ちます。コードは次のとおりです:

HTML代码
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
CSS代码
table td{height:500px;background:#ccc}
/*因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。*/

2. Chrome、Firefox、IE8 以降のブラウザでは、ブロックレベルの要素の表示を table-cell (テーブルのセル表示に設定) に設定し、vertical-align をアクティブにすることができます。属性を使用できますが、IE6 および 7 ではこのスタイルはサポートされておらず、互換性が低いことに注意してください。コードは次のとおりです:

HTML代码
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
CSS代码
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

この方法の利点は、余分な意味のないタグを追加する必要がないことですが、欠点も明らかであり、互換性はあまり高くなく、IE6 および 7 とは互換性がありません。さらに、この方法で表示ブロックがテーブルに変更されると、元のブロック要素の性質が破壊されます。

3. 要素に次の 2 つの文のいずれかを設定する場合 (display:none を除く):

1. 位置 : 絶対

2. left または float:right

を選択すると、要素の表示形式は自動的に display:inline-block (ブロック要素) に変更されます。もちろん、要素の幅と高さを設定できます。デフォルトの幅は占有されません。親要素。コードは次のとおりです:

HTML代码
<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>
CSS代码
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

2つの画像とAPI：製品のリクロッキングに必要なすべてApr 15, 2025 am 11:27 AM

最近、製品画像の色を動的に更新するソリューションを見つけました。したがって、製品の1つだけで、私たちはそれをさまざまな方法で色付けすることができます

毎週のプラットフォームニュース：サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響Apr 15, 2025 am 11:19 AM

今週のラウンドアップでは、灯台はサードパーティのスクリプトに光を当て、安全なリソースが安全なサイトでブロックされ、多くの国の接続速度がブロックされます

独自の非JavaScriptベースの分析をホストするためのオプションApr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

それはすべて頭の中にあります：Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するApr 15, 2025 am 11:01 AM

ドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です

JavaScriptのsuper（）とは何ですか？Apr 15, 2025 am 10:59 AM

子のクラスでsuper（）？を呼び出すJavaScriptを見たときに何が起こっているのか、Super（）を使用して親のコンストラクターとSuperを呼び出します。そのアクセス

さまざまな種類のネイティブJavaScriptポップアップを比較しますApr 15, 2025 am 10:48 AM

JavaScriptには、ユーザーインタラクション用の特別なUIを表示するさまざまな内蔵ポップアップAPIがあります。有名：

アクセス可能なWebサイトが構築が難しいのはなぜですか？Apr 15, 2025 am 10:45 AM

先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか

「隠された」属性は目に見えて弱いですApr 15, 2025 am 10:43 AM

あなたがそれがすべきだと思うことを正確に行うHTML属性があります：

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

WebStorm Mac版

便利なJavaScript開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。