2

「私は英国ロンドンのiOSエンジニアおよびWeb開発者です」というテキストdivを、IDが「london」の中央に配置して表示しようとしています。しかし、私はそうするための良い方法を見つけるのに苦労しています。text-align'london'のプロパティを設定するだけなので、水平方向の配置は簡単でしたdiv。ただし、垂直方向に配置しようとすると、widthandheightプロパティを設定できません。つまり、要素margin: 0 auto;を使用しているため、テキストを垂直方向に配置するために使用できません。span

これを達成するための最良の方法を教えてください。

これが私が現在持っているJSFiddleです：http：//jsfiddle.net/5aX7p/。

4

3 に答える 3

5

次のようなことができます。

HTML：

<div class="outer">
    <span class="inner">This is vertically centered.</span>
</div>

CSS：

.outer {
    display: table;
}
.inner {
    display: table-cell;
    vertical-align: middle;
}

ここであなたのフィドルを変更しました：

http://jsfiddle.net/5aX7p/5/

CSSテーブルを使用する方が、行の高さ、パディング、マージンなどを変更するよりも優れていることに注意してください。複数の行に折り返されている場合でも、内側のスパンは常に垂直方向に中央に配置されるためです。他のソリューションでは、コンテンツのサイズが変更された場合に、行の高さ、パディング、またはマージンの値を微調整する必要があります。

于 2013-02-15T23:21:35.537 に答える
0

#london分割の高さが常に200ピクセルになる場合は、に変更するだけでheight: 200px、line-height: 200px行のテキストが垂直方向に中央揃えになります。

ここを参照してください：http：//jsfiddle.net/5BDcr/

于 2013-02-15T23:20:43.457 に答える
0

これがセンターアラインメントのバージョンです（フィドルから取得）：

<div id="london">
            <span class="light" style="display: inline-block; vertical-align: middle; line-height: 1.2;">I’m an 
                <span class="heavy">iOS Engineer &amp; Web Developer</span>
                <span class="light"> from London, UK</span>
            </span>
</div>

これを#londonのCSSに追加します。

line-height: 200px;
于 2013-02-15T23:20:57.910 に答える