0

次のドキュメントで、内側の div を水平方向に中央揃えすること、または他の方法で V と H の両方のテキストをouterクラス div の中央に配置することは可能ですか?

いくつかの制約 (最初に指定しなかったことをお詫びします): 1. 固定幅を指定しないでください。2. JavaScript は使用せず、純粋な CSS と HTML のみ。

<!DOCTYPE html>
<html>
  <head>
    <title>the title</title>
    <style>

        div.outer {
            /* ? */
        }

        div.inner {
            display: table-cell;
            min-height: 100px;
            vertical-align: middle;
        }

    </style>
  </head>
  <body>
    <div class="outer">
        <div class="inner">
            <p>Vertically centered text. How to center it horizontally?</p>
        </div>
    <div>
  </body>
</html>
4

4 に答える 4

3

これを試して：

.outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

デモ

JavaScript を使用せず、width//を修正する必要もありません。heightline-height

于 2012-09-29T09:55:20.443 に答える
1

1 行のテキストの場合は、次を使用できます。

div.inner {
  line-height: 100px;
}

ブラウザのサポートが有効になるため、複数行はよりトリッキーになります。CSS のパーセンテージによるパディングは機能しますが、jQuery を使用して div.outer サイズを検出し、次にパッドを作成することが最も信頼できる方法であることがわかりました。

$(document).ready(function() {
  var whitespace = $("div.outer").innerHeight() - $("div.inner").innerHeight();
  var padding = Math.round(whitespace / 2);
  $("div.inner").css({
    "padding-top": padding + "px";
  });
});
于 2012-09-29T09:51:25.283 に答える
0

グーグルでSOを数時間検索した後、ついにdivを別のdivの水平方向と垂直方向の両方で中央に配置するための解決策を得ました。

        div.parent {
          display: block;
          text-align: center;
          line-height: 300px; /* the height of parent div */
        }
        div.child {
          display: inline-block;
          vertical-align: middle;
        }
  • 絶対配置を使用しないため、子の幅/高さを修正する必要はありません。
  • IE の一部のバージョンでサポートされていない display:table/tablecell は使用しません。
  • これは純粋な CSS ソリューションであり、子 div が動的に読み込まれる場合でも JavaScript を記述する必要はありません。

これが苦しんでいる人々を助けることができることを願っています。

于 2013-07-16T14:09:21.710 に答える
0

このチュートリアルを見てください。機能させるには、css にline-heightandを追加する必要があります。width

于 2012-09-29T09:43:04.593 に答える