52

完全に中央に配置されているように、<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>

4

7 に答える 7

78

絶対測位は必要ありません使用

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

}

そして、自由に調整してください...

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

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

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

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


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

このJBinで遊んでください

ここに画像の説明を入力してください

于 2013-02-27T20:12:45.497 に答える
16

左/右のセンタリングを取得するには、およびに適用text-align: centerします。divmargin: autop

垂直方向の配置では、さまざまな方法を理解する必要があります。これはよくある問題です。div内の要素の垂直方向の配置

于 2013-02-27T20:19:53.413 に答える
2

♣次の手順を実行する必要があります：

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

♣♣簡単にここにそれらの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;
    }
于 2017-09-15T17:04:07.053 に答える
0

あなたはあなたに追加text-align: centerする必要があるだけです<div>

あなたの場合、あなたがあなたに追加した両方のスタイルも削除してください<p>。

ここでデモをチェックしてください：http：//jsfiddle.net/76uGE/3/

幸運を

于 2013-02-27T20:27:26.760 に答える
0

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

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

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

ここでいじった

ハ、推測させてください..あなたはDIVが欲しいです..

最初の外部DIVをテーブルセルのように動作させてから、vertical 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/

于 2013-02-27T20:45:54.437 に答える
0

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

.myCenteredPElement{
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
}
于 2019-03-05T19:53:20.980 に答える
0

このソリューションは、IEを除くすべての主要なブラウザーで正常に機能します。したがって、それを覚えておいてください。

この例では、基本的に、UI要素の中央に配置、水平および垂直変換を使用します。

        .container {
            /* set the the position to relative */
            position: relative;
            width: 30rem;
            height: 20rem;
            background-color: #2196F3;
        }


        .paragh {
            /* set the the position to absolute */
            position: absolute;
            /* set the the position of the helper container into the middle of its space */
            top: 50%;
            left: 50%;
            font-size: 30px;
            /* make sure padding and margin do not disturb the calculation of the center point */
            padding: 0;
            margin: 0;
            /* using centers for the transform */
            transform-origin: center center;
            /* calling calc() function for the calculation to move left and up the element from the center point */
            transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
        }
<div class="container">
    <p class="paragh">Text</p>
</div>

これがお役に立てば幸いです。

于 2020-03-12T15:06:54.273 に答える