web-dev-qa-db-ja.com

<div>コンテナ内で<p>要素を中央に配置する方法は？

<p>コンテナの中心にある要素<div>（完全に中央揃え）-上、下、左、右の余白がスペースを均等に分割します。

どうすればそれを達成できますか？

div {
  width: 300px;
  height: 100px;
}
p {
  position: absolute;
  top: auto;
}
<div>
  <p>I want this paragraph to be at the center, but it's not.</p>
</div>
htmlcsstextcentering
34
Johnsy

絶対配置は必要ありません

p {
 text-align: center;
line-height: 100px;

}

そして思いのままに調整...

テキストが幅を超えて複数行にわたる場合

その場合、次のようにルールに表示プロパティを含めることで調整できます。

（例を見やすくするために背景を追加しました）

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}


p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

これで遊んでください JBin

enter image description here

49
Fico

左右にセンタリングするには、text-align: centerをdivに、margin: autoをpに適用します。

垂直方向の配置については、さまざまな方法を理解していることを確認する必要があります。これはよくある質問です。 div内の要素の垂直方向の配置

9
GordonsBeard

these次の手順を実行する必要があります。

  1. mother Elementはpositionedである必要があります（EXPの場合、position：relative;）
  2. 子要素は "Absolute"に配置されている必要があり、値は次のように設定する必要があります。top：0; buttom：0; right：0; left：0; （垂直方向の真ん中に）
  3. 子要素には、「margin：auto」（垂直方向の真ん中に）を設定する必要があります
  4. 子要素および母要素は「高さ」および「幅」を持つ値
  5. for mother Element => text-align：center（水平方向の中央に）

hereここに、これらの5つのステップの要約を示します。

.mother_Element {
    position : relative;
    height : 20%;
    width : 5%;
    text-align : center
    }
.child_Element {
    height : 1.2 em;
    width : 5%;
    margin : auto;
    position : absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }
2
ashkan nasirzadeh

コンテンツの中央揃えと中央揃え？

このようにしてください：

<table style="width:100%">
    <tr>
        <td valign="middle" align="center">Table once ruled centering</td>
    </tr>
</table>

I ここで調整

はい、DIVが欲しいと思います..

最初のDIVをテーブルセルのように動作させてから、垂直align：middleでスタイル設定するだけです。

<div>
    <p>I want this paragraph to be at the center, but I can't.</p>
</div>

div {
    width:500px;
    height:100px;
    background-color:aqua;
    text-align:center;
    /*  there it is */
    display:table-cell;
    vertical-align:middle;
}

jsfiddle.net/9Mk64/

0
Milche Patern

p要素に、3つのスタイリングルールを追加します。

.myCenteredPElement{
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
}
0
freddy mercury