9

サイズ変更可能なDIVの真ん中にテキストを残そうとしています。次に例を示します。

CSS

#rightmenu {
  position: absolute;
  z-index: 999999;
  right: 0;
  height: 60%;
  text-align: center;
}

HTML

<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>

自動で「margin-topとmargin-bottom」の両方のテキストを含むクラスを作成しようとしましたが、機能しません。

4

5 に答える 5

16

IE7のサポートを気にしない場合は、次のように行うことができます。

HTML：

<div id=wrap>
  <div id=inside>
    Content, content, content.
  </div> 
</div>

CSS：

#wrap {
    /* Your styling. */
    position: absolute;
    z-index: 999999;
    right: 0;
    height: 60%;
    text-align: center;

    /* Solution part I. */
    display: table;
}

/* Solution part II. */
#inside {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

コード：http ：//tinkerbin.com/ETMVplub

JavaScriptに問題がない場合は、次のjQueryプラグインを試すことができます：http：//centratissimo.musings.it/しかし、IE7もサポートしていないようであるため、CSSソリューションの方がおそらく優れています。

于 2012-05-10T17:33:30.350 に答える
4

Flexboxは、要素を流動的に整列させることでゲームを大きく変えました。コンテナ要素を定義してから、display: flex使用するインナーチャイルドを整列させますjustify-content: center; align-items: center;

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.parent {
    height: 500px;
    width: 500px;
    position: relative;
}


<div class="parent">
    <div class="container">
        <p>Hello</p>
        <p>World</p>
    </div>
</div>

.container「Hello」と「World」の両方が要素内で垂直方向と水平方向の中央に配置されることに気付くでしょう。

于 2016-11-15T00:22:11.907 に答える
1

に置き換えheight: 60%;ますpadding: 30% 0;。

于 2012-05-10T17:44:44.757 に答える
0

テキストをdivの水平方向の中央に配置する場合は、'text-align：center;' あなたの友だちです。垂直方向の中央に配置したい場合。コンテンツを内部div内にラップしてから、その内部divに「margin：auto」を使用します。もちろん、内側のdivに幅を指定する必要があります。そうしないと、水平方向の中央が機能しません。
'valign = "middle"'は、テーブルがオプションの場合はテーブルでも機能します（それ以外の場合は推奨されません）

于 2012-05-10T17:42:54.963 に答える
0

これが必要かどうかを確認します。

<html>

<head>
  <style type="text/css">
    div {
      height: 100px;
      width: 100px;
      background: #ccc;
      text-align: center;
    }

    p {
      line-height: 100px;
    }

  </style>
</head>

<body>
  <div>
    <p>centered</p>
  </div>
</body>

</html>
于 2012-05-11T09:01:39.143 に答える