ホームページ > 記事 > ウェブフロントエンド > html(コード)で中心を設定する方法の紹介

html(コード)で中心を設定する方法の紹介

不言オリジナル: 2018-09-01 10:49:3212210ブラウズ

この記事の内容はHTMLでのセンタリング設定方法の紹介(コード)ですので、困っている方は参考にしていただければ幸いです。

水平方向の中央揃え

実際の開発プロセスでは、記事のタイトルなど、要素を水平方向の中央揃えにする必要がある場面に多く遭遇します。ここでの一般的な水平方向の中央揃えの状況には、インライン要素とブロックレベル要素が含まれます。ブロックレベル要素は、固定幅のブロックレベル要素と可変幅のブロックレベル要素にさらに分割されます。名前が示すように、固定幅のブロックレベル要素は、ブロックレベルの要素の幅が固定値であることを意味します。その後、可変幅のブロックレベル要素の場合、ブロックレベルの要素の幅は固定値ではないことがわかります。固定値。

インライン要素

設定される要素がテキストや画像などのインライン要素である場合、親要素に text-align:center を設定することでこれを行います。

<body>
    <div class="textCenter">这是一个在父元素中居中元素</div>
</body>
<style>
    textCenter{
    text-align:center;
    }
</style>

上記のコードから、「これは親要素の中央に配置された要素である」ことがわかります。このテキストの親要素の CSS スタイルは text-align:center; で表示されます。中心。ただし、設定する要素がブロックレベル要素の場合は、この方法は適用できません。ブロックレベル要素には、固定幅のブロックレベル要素と可変幅のブロックレベル要素の2種類があります。

固定幅のブロックレベル要素

固定幅のブロックレベル要素で「固定幅」と「ブロックレベル要素」の2つの条件が満たされる場合、左と左を設定することでセンタリングを実現できます。右マージンの値を自動にします。

<body>
    <div>水平居中的定宽块级元素</div>
</body>
<style>
    div{
        border:1px solid blue;
        width:100px;    /*宽度设置固定值*/
        margin:10px auto;
    }
</style>
/*或者也可以写成 margin-left:auto;
               margin-right:auto;*/
/* 元素的上下margin属性可以照常设置，不受影响 */

可変幅のブロックレベル要素

可変幅のブロックレベル要素を中央に配置するには 3 つの方法があります。1 つ目は table タグを追加することです。2 つ目は、display:inline メソッドを設定することです。最初の方法では、表示タイプが設定されます。インライン要素の場合は、可変幅要素のプロパティを設定します。3 番目の方法は、position:relative および left:50% を設定し、相対位置を使用して要素を 50% オフセットします。左に回すとセンタリングが行われます。

テーブルタグの追加

テーブルタグの追加では、テーブルタグの長さの適応性を利用します (長さは定義されておらず、親要素本体の長さはデフォルトではありません。テーブルの長さは、テーブルタグの長さに基づいて決定されます)。内側のテキスト) なので、固定幅のブロックレベル要素と見なすことができ、固定幅のブロックレベル要素の margin メソッドを使用して水平方向に中央揃えにします。

使用する最初のステップは、中央に配置する必要がある要素の外側にテーブルタグを追加し、テーブルの「左右のマージンセンター」を設定することです

<div>
    <table>
        <tbody>
            <tr><td>
            <ul>
                <li>锄禾日当午</li>
                <li>汗滴禾下土</li>
                <li>谁知盘中餐</li>
                <li>粒粒皆辛苦</li>
            </ul>
            </td></tr>
        </tbody>
    </table>
</div>
<style>
    table{
    border:1px solid;
    margin:0 auto;
    }
</style>

display:inlineメソッドを設定します

ブロックレベル要素の表示を inline Type に設定し、インライン要素を表示するように設定してから、text-align:center を使用して中央表示を実現します。テーブル方式と比較したこの方式の利点は、非セマンティックタグを追加する必要がないことですが、この方式には特定の問題もあります。つまり、ブロック要素の表示がインラインに変更され、要素の数が少なくなります。インライン要素になるとき。

<body>
    <div class="container">
        <ul>
            <li><a href="#">First</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
        </ul>
    </div>
</body>
 
<style>
.container{
    text_align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
 
.container li{
margin-right:10px;
display:inline;
}
</style>

position:relative と left:50% を設定します

親要素に float を設定し、次に、position:relative と left:50% を設定し、要素のposition:relative and left:50% を設定することで、水平方向のセンタリングを実現します。子要素。

<body>
<div class="container">
    <ul>
        <li><a href=""#>First</a></li>
        <li><a href=""#>Second</a></li>
        <li><a href=""#>Third</a></li>
        <li><a href=""#>Fourth</a></li>
    </ul>
</div>
</body>
 
<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 つの状況に分けられます。

親要素の高さが決定された単一行のテキスト

親要素の高さと行の高さを一貫して設定することにより、親要素の高さが決定された単一行のテキストが垂直方向の中央に配置されます。 height は要素の高さ、line-height は行の高さ、つまり行間のベースライン間の距離である行間隔です。計算された line-height と font-size の差は半分に分割され (CSS では「行間隔」と呼ばれます)、テキスト行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはラインボックスです。この種のテキスト行の高さとブロックの高さには欠点が生じます。つまり、テキストコンテンツの長さがブロックの幅よりも長い場合、一部のコンテンツがブロックから外れてしまいます。

<div class="container">
    hello,world!
</div>
 
<style>
.container{
    height:10px;
    line-height:10px;
}
</style>

親要素の特定の高さを持つ複数行のテキスト

親要素の特定の高さで複数行のテキストや画像などを垂直方向に中央揃えにする方法は 2 つあります。1 つ目は、 table タグを指定して、vertical-align:middle を設定します。 CSS には垂直方向の中央揃えのための属性vertical-align があります。親要素がこのスタイルを設定すると、すべてのインラインブロックタイプの子要素に役立ちます。

/* 方式一 */
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>居中一下</p>
</div>
</td></tr></tbody></table>
</body>
 
<style>
table td{
    height:500px;
    background:#ccc;
}
</style>
 
/* 方式二 */
<div class="container">
    <div>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
    </div>
</div>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

chrome、firefox、IE8 以降のブラウザでは、ブロックレベル要素の表示を table-cell に設定し、vertical-align 属性をアクティブにすることができますが、IE6 と 7 はこのスタイルをサポートしていないことに注意してください。

表示タイプを暗黙的に変更する

開発プロセス中に要素にposition:absoluteまたはfloat:left属性を設定すると、要素の表示タイプは自動的にdisplay:inline_block（ブロックレベル要素）に変更されます。要素の幅と高さを設定できます。

<div class="container">
    <a href="#" title="">点这里看看</a>
</div>
<style>
.container a{
    position；absolute;
    width:200px;
    background:#ccc;
}
</style>

html(コード)で中心を設定する方法の紹介

関連記事