CSS を使用したテキストと画像の垂直方向と水平方向の中央揃えについて

CSSを使用してテキストと画像の垂直方向と水平方向の中央揃えを実現することについて

私はいつも、良い記憶力は悪いペンより悪いと信じてきました、最近、私は遭遇しました。垂直センタリングを使用している人が多いので、今後の参考のために整理します。

1. テキストを垂直方向と水平方向に中央揃えにする

1. テキストを水平方向に中央揃えにする:

テキストを水平方向に中央揃えにすることは、次の方法で簡単に実現できます。 text-align:center; を使用します。

---

2. 垂直方向の中央揃え:

1) 単純な単一行テキスト

line -heightを使用する==高さ、単一行になりますテキストを垂直方向に中央揃えにします。

1 e388a4556c0f65e1904146cc1a846bee
2     垂直水平居中
3 94b3e26ee717c64999d7867364b1b4a3

1 p{
2     width: 200px;
3     height: 200px
4     text-align: center;
5     line-height: 200px;
6     background:#1AFF00;7 }

簡単に言うと、このように p タグを使用するだけです

e388a4556c0f65e1904146cc1a846bee垂直水平居中94b3e26ee717c64999d7867364b1b4a3

1 p{
2     width: 200px;
3     height: 200px;
4     text-align: center;
5     line-height: 200px;
6     background:#00ABFF;7 
}

効果は次のとおりです:

---

2) 複数行テキスト

テーブルのプロパティ、ブロックレベルの親要素display: table; inline要素display: table-cell; vertical-align: middle;

1 8cfb616408c43fb55cbe9d0aaf186081国际《儿童权利公约》界定的儿童系指18岁以下的任何人54bdf357c58b8a65c66d7c19c8e4d114
3 94b3e26ee717c64999d7867364b1b4a3

Positioning+ transform:translateY(-50%); 幅と固定高さについて、親要素は

padding

の値を使用します。これは、親要素の高さから子要素

 1 p{ 
 2     width: 200px; 
 3     height: 200px; 
 4     display: table; 
 5     background:#1AFF00; 
 6 } 
 7 span{ 
 8     display: table-cell; 
 9     vertical-align: middle;10 }

の高さの半分を引いた値です。どちらも固定幅と固定高で、親要素は

overflow: hidden; (CSS ハック) を使用します。この値は、親要素の高さから子要素の高さの半分を引いたものです。効果は以下の通りです: , 水平方向中央揃え

1) cssの初期設定ではimgがinline-blockになっており、水平方向に中央揃えにしたい場合はtext-alignを使います。 center;

2) img要素にdisplay:block;を設定して、水平方向に中央揃えにしたい場合は

これを使用します。デモとしての写真

---

1 e388a4556c0f65e1904146cc1a846bee
2     e388a4556c0f65e1904146cc1a846bee国际《儿童权利公约》界定的儿童系指18岁以下的任何人94b3e26ee717c64999d7867364b1b4a3
3 94b3e26ee717c64999d7867364b1b4a3

Line-height==heightvertical-align: middle;

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background: #00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     transform: translateY(-50%);14 }

display: table-cell;vertical-align: middle;

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     margin-top: -32px;
 14 }

display: table-cell; : 中央; テキスト整列: 中央;

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 0;
 10     left: 0;
 11     right: 0;
 12     bottom: 0;
 13     margin: auto;
 14     width: 200px;
 15     height: 64px;
 16 }

位置決め + 表示: ブロック; 変換: 移動 (-50%,-50%);

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
}

　　定位+margin: auto;

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

　　 overflow: hidden;margin值

p{
    width: 198px;
    height: 198px;
    overflow: hidden;
    border: 1px solid #8900FF;
}
img{ 8     margin: 25px;
}

　　padding值

 p{
 2     padding: 25px;
 3     width: 148px;
 4     height: 148px;
 5     border: 1px solid #8900FF;
 6 }

　　用table的属性+vertical-align: middle;实现

1 <p>2     <span><img alt="" src="1.jpg" /></span>3 </p>

p{
    display: table;
    width: 198px;
    height: 198px;
    text-align: center;
    border: 1px solid #8900FF;
}
span{
    display:table-cell;
    vertical-align: middle;
}

　　用background实现

1 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

1 p{
2     width: 198px;
3     height: 198px;
4     border: 1px dashed #8900FF;
5     background: url(1.jpg) no-repeat center center;
6 }

　　效果如下：

　　

 原文来自：http://www.cnblogs.com/Ni-F/p/6937931.html 感谢作者分享！

以上がCSS を使用したテキストと画像の垂直方向と水平方向の中央揃えについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。