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

CSSスタイル設定

高洛峰

リリース： 2016-10-29 11:25:16

オリジナル

2058 人が閲覧しました

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>

ログイン後にコピー