ホームページ >ウェブフロントエンド >htmlチュートリアル >html_html/css_WEB-ITnose の水平方向と垂直方向のセンタリングに関する概要
最近、中央揃えの問題がたくさん発生したので、時間をかけてここにまとめました。 0.0~~
1. テキストを中央揃えにします。
1 <div class="wrap">2 我在中间……3 </div>
1.1. height+line-height+text-center (単一行のみ中央揃え可能)
1 .wrap{2 width:200px; 3 height:200px;4 border:1px solid red; 5 text-align: center;6 line-height: 200px;7 }
ps:text-align:center只是将元素下面的内联元素居中显示
1.2display:table-cell (固定高さの複数行を中央揃え)
1 .wrap{2 width:200px; 3 height:200px;4 border:1px solid red; 5 text-align: center; 6 display:table-cell; 7 vertical-align: middle;8 }
display:table-cell:ie67不管用,最好配合display:table;一起用ie67下:(以后也不用了,不过也放这儿吧)方法一:(通过em标签高度与父级等高,所以span和em居中就相当于span在父级居中)
1 <div class="wrap">2 <span>3 我在中间…… 我在中间…… 我在中间…… 我在中间……4 </span>5 <em></em>6 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 border:1px solid red; 5 text-align: center; 6 } 7 .wrap span{ 8 vertical-align: middle; 9 display:inline-block; 10 width:180px;11 }12 .wrap em{13 height:100%;14 vertical-align: middle; 15 display:inline-block;16 }
方法二:(通过给子元素增加一个绝对定位的父级标签,再配合子元素的相对定位水平垂直居中)
1 <div class="wrap">2 <span class="span1">3 <span class="span2">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>4 </span>5 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 border:1px solid red; 5 display:table; 6 position:relative; 7 overflow: hidden; 8 } 9 .wrap .span1{10 display:table-cell; 11 vertical-align: middle; 12 text-align: center;13 *position:absolute;14 top:50%;15 left:50%;16 }17 .wrap .span2{18 *position:relative;19 top:-50%;20 left:-50%;21 }
1.3padding (内側のパディング、言うまでもありません)
1 .wrap{2 width:200px;3 border:1px solid red;4 padding:50px 0;5 }
2. 中央揃えの要素
1 <div class="wrap">2 <span></span>3 </div>
2.1position:absolute+margin 負の値 (幅が必要)マージンを計算するための高さと)
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red;10 }11 .wrap span{ 12 width:80px; 13 height:80px; 14 background:red;15 position: absolute; 16 top:50%; 17 left:50%; 18 margin-top:-40px; 19 margin-left:-40px;20 }
ps:position:absolute/fixed使内嵌支持宽高
2.2Position:absolute+margin:auto
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red;10 }11 .wrap span{ 12 width:80px; 13 height:80px; 14 background:red;15 position: absolute; 16 top:0;17 right:0;18 bottom:0;19 left:0;20 margin:auto;21 }
2.3position 負の値
1 <div class="wrap">2 <span class="span1">3 <span class="span2">fds</span>4 </span>5 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red; 10 }11 .wrap .span1{12 position:absolute;13 top:50%;14 left:50%;15 width:80px;16 height:80px;17 }18 .wrap .span2{ 19 width:80px;20 height:80px;21 display:block;22 line-height:80px;23 text-align:center;24 background:red; 25 position:relative;26 top:-50%;27 left:-50%;28 }
2.4transform: -50%、-50%) ;(翻訳は互換性を考慮せず、それ自体に対してオフセットされます。この方法は良いです)
1 <div class="wrap">2 <span >fds</span>3 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red;10 }11 .wrap span{ 12 width:80px;13 height:80px;14 background:red;15 position:absolute;16 top:50%;left:50%;17 -webkit-transform: translate(-50%,-50%);18 -ms-transform: translate(-50%,-50%);19 -o-transform: translate(-50%,-50%);20 transform: translate(-50%,-50%);21 }
2.5 並列 1 つのタグ
1 <div class="wrap">2 <span></span>3 <em></em>4 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red; 10 text-align: center;11 }12 .wrap span{13 width:80px;14 height:80px;15 background:red;16 display:inline-block; 17 vertical-align: middle;18 } 19 .wrap em{20 height:100%;21 vertical-align:middle; 22 display:inline-block;23 }
2.6 表示: テーブルと表示: テーブルセル
1 <div class="wrap">2 <div>3 <span></span>4 </div>5 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red; 10 display:table;11 }12 .wrap div{13 display:table-cell;14 vertical-align: middle;15 text-align: center;16 }17 .wrap span{ 18 width:80px;19 height:80px;20 background:red; 21 display:inline-block;22 }
2.7display:box
1 <div class="wrap">2 <span >fds</span>3 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red; 10 display: -webkit-box;11 -webkit-box-pack:center;12 -webkit-box-align:center;13 }14 .wrap span{15 width:80px;16 height:80px;17 background:red;18 display:block;19 }
3. 中央に配置された浮動要素
1 <div class="wrap">2 <ul>3 <li>fdasfd</li>4 <li>fdsfds</li>5 <li>fdfds</li>6 </ul>7 </div>
1 .wrap{ 2 width:800px; 3 height:200px; 4 margin:200px auto; 5 border:1px solid red; 6 position:relative; 7 overflow: hidden; 8 } 9 .wrap ul{10 float: left; 11 position: relative; 12 left:50%;13 top:50%; 14 border:1px solid red; 15 height:100px; 16 }17 .wrap li{18 float: left; 19 width:100px; 20 height:100px; 21 background:red; 22 position: relative; 23 left:-50%;24 top:-50%; 25 margin-left:10px; 26 list-style: none; 27 _display:inline; /*ie6双边距*/28 *overflow: hidden;/*ie7下面不支持宽度*/29 }