HTML+CSS学習メモ(15)-htmlチュートリアル-php.cn

水平方向のセンタリングの設定 - インライン要素

実際の作業では、水平方向のセンタリングを設定する必要がある場面によく遭遇します。今日は水平方向のセンタリングを設定する方法を見ていきます。

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

html コード:

<body>  <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div></body>

ログイン後にコピー

css コード:

<style>  div.txtCenter{    text-align:center;  }</style>

ログイン後にコピー

水平中央設定 - 固定幅ブロック要素

の場合要素をブロック要素に設定する場合、text-align: center は機能しません。この場合、 固定幅ブロック要素 と 可変幅ブロック要素 <🎜】の 2 つの状況が考えられます。 > 。このセクションでは、まず固定幅のブロック要素について説明します。

固定幅とブロック の 2 つの条件を満たす要素は、「左右のマージン」の値を " に設定することで設定できます。 auto 」を使用してセンタリングを実現します。 div ブロック要素を水平方向の中央に設定する例を見てみましょう。

html コード:

<body>  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div></body>

ログイン後にコピー

css コード:

<style>div{    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/    width:500px;/*定宽*/    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>

ログイン後にコピー

次のように書くこともできます:

margin-left:auto;margin-right:auto;

ログイン後にコピー

注: 要素の「上下のマージン」は任意に設定できます。

水平方向のセンタリングのまとめ - 幅可変ブロック要素の方法

実際の作業では、ページングなどの「幅が可変のブロック状要素」に対してセンタリングを行う必要が出てきます。 Web ページ上のナビゲーションはページネーションの数が定義されていないため、幅を設定することで柔軟性を制限することはできません。

可変幅のブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がより頻繁に使用されます)。

1. テーブルタグを追加します。 2. インラインメソッドを設定します。 3. 位置を設定します。 :relative and left:50%;

1. table タグを追加します

ステップ 1: table タグ (、< ;tr>、を含む) を追加します。

ステップ 2: このテーブルの「中央の左右のマージン」を設定します (これは固定幅ブロック要素と同じ方法です)。

例:

HTML コード:

<div><table>  <tbody>    <tr><td>    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul>    </td></tr>  </tbody></table></div>

ログイン後にコピー

CSS コード:

<style>table{    margin:0 auto;}ul{list-style:none;margin:0;padding:0;}li{float:left;display:inline;margin-right:8px;}</style>

ログイン後にコピー

説明: テーブルは、 li要素はブロックレベルの要素であり、新たに追加したコンテンツを一定の順序で並べるためにインライン要素として設定する必要があります。ソート順はそのままで、各 li は前の li から分離されます。間隔は 8px で、マージンは

を実現するために使用されます。 2. インラインメソッド

を設定します。ブロックレベル要素の表示をインラインタイプに変更し、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;}.container ul{    list-style:none;    margin:0;    padding:0;    display:inline;}.container li{    margin-right:8px;    display:inline;}</style>

ログイン後にコピー

最初の方法と比較したこの方法の利点は、非セマンティックタグを追加すると、タグのネストの深さが簡素化されますが、いくつかの問題もあります。ブロック要素の表示タイプがインラインに変更され、ブロック要素がインライン要素に変わるため、長さの値の設定などの一部の機能が欠落します。

3. 位置: 相対と左: 50% を設定します。

親要素に位置: 相対と左: 50% を設定します。要素は、水平方向のセンタリングを実現するために、position:相対と left:-50% を設定します。

コードは次のとおりです:

<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>

ログイン後にコピー

このメソッドはブロック要素を保持し、display:block の形式で表示できます。サイレントディスカッションタグはネストの深さを増やしませんが、その欠点は、position:relative が設定されているため、特定の副作用が生じることです。

説明: 1. ウィンドウ幅の 50% だけ右に移動します。2. 要素幅の 50% だけ左に移動します。3. 中央に配置します。

これら 3 つの方法は広く使用されており、それぞれに独自の長所と短所があります。どの方法を選択するかは、特定の状況によって異なります。

垂直方向のセンタリング - 高さが親要素によって決定される単一行のテキスト

高さが親要素によって決定される単一行のテキストの垂直方向のセンタリング方法は、これを実現します。親要素の高さと行の高さを一致させるように設定します。次のコード:

<div class="container">    hi,imooc!</div>css代码：<style>.container{    height:100px;    line-height:100px;    background:#999;}</style>

ログイン後にコピー

これは、要素の 1 行を中央に配置する場合にのみ使用できますが、複数の行がある場合は機能しません。この方法は単純ですが、適用範囲はそれほど広くありません。

垂直中央揃え - 親要素の特定の高さの複数行テキスト (方法 1)

親要素の特定の高さの複数行テキスト、 picture、ブロック要素 を垂直方向の中央に配置するには 2 つの方法があります。

方法 1: 挿入テーブル (tbody、tr、td を含む) タグを使用し、垂直配置: 中央。

垂直方向の中央揃えと言えば、CSS に垂直方向の中央揃え用のプロパティvertical-align がありますが、このスタイルは親要素が td または th の場合にのみ有効です。したがって、再度 table タグを挿入する必要があります。例を見てみましょう:

html コード:

<body><table><tbody><tr><td class="wrap"><div>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>

ログイン後にコピー

css コード:

table td{height:500px;background:#ccc}

ログイン後にコピー

td タグでは、vertical-align が middle に設定されているため、デフォルトなので、明示的に設定する必要はありません。

垂直居中-父元素高度确定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

html代码：

<div class="container">    <div>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <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。

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

position : absolutefloat : left 或 float:right

ログイン後にコピー

元素会自动变为以 display:inline-block的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">    <a href="#" title="">进入课程请单击这里</a></div>

ログイン後にコピー

css代码

<style>.container a{    position:absolute;    width:200px;    background:#ccc;}</style>

ログイン後にコピー

我的公众号二维码