0

問題が発生しました。ホバーで画像を作ろうとしています。divにテキストを入れました。今、テキストをdivの中央に配置したい. 私が使用した：

display: table-cell;
vertical-align: middle;

テキストはDivのほぼ真ん中にあります。さらにテキストを追加すると、テキストが中央に配置されていないことがわかります。

実際の例: http://jsfiddle.net/DennisBetman/6TkkE/

あなたの何人かが問題を知っていて、私を助けてくれることを願っています。

4

2 に答える 2

0

これは、私の目的には問題なく機能するための優れた回避策です。自分のサイズのコンテナーを取得します (相対サイズでも問題ありません)。その位置を相対的にし、その中にスパンまたは p を絶対位置で配置します。行の高さ、おそらく 30px を指定します。フォントサイズによって異なります。次に、左と上で中央に配置し、マージンを修正し、幅を 100% にして text-align: center を適用する必要があります。

.container {
    position: relative;
    width: 800px;
    height: 600px;
}
.container > span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -50%;
    line-height: 30px;
    width: 100%;
    text-align: center;
}
...
<div class="container">
    <span>Vertical and Horizontal align.</span>
</div>

私にとってはうまくいきました！

于 2014-06-26T11:01:24.780 に答える