0

固定の高さと幅の div 内で水平方向と垂直方向の中央に配置されたテキストのブロックを取得しようとしています。また、テキストに半透明の黒い背景を付け、可能であれば 2 行に引き伸ばすことができるようにしたいと考えています。

私が抱えている問題は、行が垂直方向に中央に配置されておらず、テキストの背後にある黒い背景が新しい行の先頭で奇妙なことをしていることです.

私が現在持っているコードはこれです：

HTML

<div class="description">
    <span>Welcome to the world of beautiful design, technology and music.</span>
</div>

CSS

div.description {
    width: 645px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}
div.description span {
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: 28px;
    line-height: 60px;
    padding: 10px;
}

この種の外観を模倣しようとしていますhttp://grab.by/fwNe奇妙なjavascriptハックを使用して2行に分割する必要はありません。

ありがとう、チャーリー

4

5 に答える 5

1

最もエレガントな方法があります。display:table-cell;

CSSは次のようになります

div.description {
    width: 645px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    display:table-cell; 
    vertical-align : middle;
}
div.description span {
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: 28px;
    line-height: 60px;
    padding: 10px;
}​

デモ

于 2012-08-22T03:55:35.343 に答える
1

を使用できるようにするために、テーブルを使用 (または模倣) することもできますvertical-align: middle;。http://jsfiddle.net/LcBbc/

于 2012-08-22T03:14:13.863 に答える
0

これが私が本当に面白いと思う「未知の中心」への1つの方法です：http：//jsfiddle.net/joplomacedo/ag5ea/

HTML：

<div class="description">
    <span>
        Welcome to the world of beautiful design,<br />
        technology and music.
    </span>
</div>​

CSS：

.description {
    width: 645px; height: 200px;
    margin: 0 auto;
    text-align: center;
}

.description:before {
    content: "";
    display: inline-block;
    height: 100%;
    margin-right: -0.25em;
    vertical-align: middle;
}

.description span {
    display: inline-block;
    vertical-align: middle;
}

このテクニックを自分で思いついたらよかったのですが、実際にはcss-tricks.comで知りました。そのリンクは次のとおりです：http：//css-tricks.com/centering-in-the-unknown/ </ p>

于 2012-08-22T03:54:59.237 に答える
0

div.description で、margin-top と margin-left をウィンドウの高さと幅に対するパーセンテージ値で指定できます。

例: 置換

margin: 0 auto

と

margin-top: 10%;
margin-left: 20%;
于 2012-08-21T17:49:17.997 に答える