ホームページ > 記事 > ウェブフロントエンド > HTML の水平方向と垂直方向のセンタリングの問題

HTML の水平方向と垂直方向のセンタリングの問題

高洛峰オリジナル: 2017-02-24 10:41:261382ブラウズ

最近、中央揃えの問題がたくさん発生したので、後で簡単に見つけられるように、時間をかけてここにまとめました

1. テキストを中央揃えにします

<p class="wrap">
      我在中间……
</p>
.. height+line-height+text-center（只能居中单行）
.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center;
    line-height: px;
}

ps:text -align:center は、要素の下のインライン要素を中央に配置するだけです
1.2display:table-cell (複数行固定高さ中心)

.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center; 
    display:table-cell; 
    vertical-align: middle;
}

display:table-cell：ie67不管用,最好配合display:table;一起用

ie67: (将来のことですが、ここに置きます)
方法 1: (em タグの高さは親の高さと同じなので、span と em を親にセンタリングすることは、親のスパンをセンタリングすることと同じです)

<p class="wrap">
   <span>
       我在中间…… 我在中间…… 我在中间…… 我在中间……
   </span>
   <em></em>
</p>
 .wrap{
     width:px; 
     height:px;
     border:px solid red; 
     text-align: center;
 }
 .wrap span{
     vertical-align: middle;
     display:inline-block; 
    width:px;
}
.wrap em{
    height:%;
    vertical-align: middle; 
    display:inline-block;
}

方法 2: (子要素の Label に絶対位置の親を追加し、子要素の相対的な位置を調整して水平方向と垂直方向の中央に配置します)

<p class="wrap">
    <span class="span">
       <span class="span">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
    </span>
</p>
 .wrap{
     width:px; 
     height:px;
     border:px solid red;
     display:table;
     position:relative; 
     overflow: hidden;
 }
 .wrap .span{
    display:table-cell; 
    vertical-align: middle; 
    text-align: center;
    *position:absolute;
    top:%;
    left:%;
}
.wrap .span{
    *position:relative;
    top:-%;
    left:-%;
}

1.3 パディング (内部パディング)言うまでもなく)

.wrap{
    width:px;
    border:px solid red;
    padding:px ;
}

2. 中央に配置された要素

<p class="wrap">
    <span></span>
</p>

2.1position:absolute+margin 負の値 (幅と高さはマージンを計算するために利用可能である必要があります)

 .wrap{
     width:px; 
     height:px;
     position:absolute; 
     top:%; 
     left:%; 
     margin-top:-px; 
     margin-left:-px;
     border:px solid red;
}
.wrap span{ 
    width:px; 
    height:px; 
    background:red;
    position: absolute; 
    top:%; 
    left:%; 
    margin-top:-px; 
    margin-left:-px;
}

ps: CSS は上下の水平センタリングと垂直センタリングを実装します

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>上下垂直居中 在线演示 pCSS5</title>  
<style>  
#main {  
   position: absolute;  
   width:400px;  
   height:200px;  
   left:50%;  
   top:50%;  
   margin-left:-200px;  
   margin-top:-100px;  
   border:1px solid #00F  
}  
/*css注释：为了方便截图，对CSS代码进行换行*/  
</style>  
</head>  
<body>  
   <p id="main">p水平居中和上下垂直居中<a href="http://www.pcss5.com/">pCSS5</a></p>  
</body>  
</html>

horizontal 垂直センタリングの原理の紹介
絶対位置決めここではposition:absoluteが使用され、leftとtopは次のように使用されます。オブジェクトの上部と左端までの距離を 50% に設定しますが、50% に設定するとボックスは実際にはセンタリング効果を実現しないため、margin-left は :-200px;margin-top:-100px に設定されます。 ;、ここにトリックがあります。 margin-left の値はオブジェクトの幅の半分、margin-top の値もオブジェクトの高さの半分で、同時に負の値に設定されるため、水平方向と垂直方向のセンタリングが実現されます。

HTML の水平方向と垂直方向のセンタリングの問題に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML常用标签及html标签的特点次の記事：HTML设计模式笔记整理

続きを見る

HTML の水平方向と垂直方向のセンタリングの問題

関連記事