4

私は HTML/CSS の初心者であり、サイド div の要素を垂直方向に配置することに夢中になっています。基本的に、私はdivテキストと画像の混合を含む を持っています。私がやりたかったのは、ediv の真ん中にある要素を垂直方向に揃えることだけです。

この投稿によると：

インライン要素(およびインライン要素のみ) は、vertical-align: middle を使用して、コンテキスト内で垂直方向に整列できます。ただし、「コンテキスト」は親コンテナーの高さ全体ではなく、それらが含まれるテキスト行の高さです。

したがって、SPANイベント セットを作成しますdiplay: inlineが、何も機能しません。

<div id="main_section" class="main_align" >
    <span class="inline">
        <span class="inline"><img src="http://placehold.it/50x50" /></span>
        &nbsp;
        <span class="small inline">A Very Small Text</span>
        &nbsp;
        <span class="medium inline">Medium String</span>
    </span>
</div>

ここにjsfiddleがあります。

どんなポインタでも大歓迎です。

注: これが Chrome と Firefox で動作する場合は幸いです。IE 固有の問題に対処する必要はありません。

4

2 に答える 2

6

EDIT 2018: 私は最近、任意の方向にセンタリングするためにFlexboxを頻繁に使用する傾向があります。inline-block はまだ問題ありませんが、Flexbox は非常に強力です :)

異なるサイズのテキストを（ベースライン以外で）垂直方向に揃えたい場合は、以下を使用して次のフィドルが可能な解決策ですinline-block：http://jsfiddle.net/vGKjj/13/

HTML:

<div id="main_section" class="main_align" >
    <span>
        <span class="vam"><img src="http://placehold.it/50x50" /></span>
        &nbsp;
        <span class="small vam">A Very Small Text</span>
        &nbsp;
        <span class="medium vam">Medium String</span>
    </span>
</div>

CSS:

.vam {
    vertical-align: middle;
}
span.vam {
    display: inline-block;
}
.vam img {
    vertical-align: top; /* removes a white gap below image */
}
于 2013-05-10T16:51:31.760 に答える
1

あなたの問題は、次のコードを追加することで解決できます

.inline img{
   vertical-align:middle;
 }

また
、高さが固定されている場合は、行の高さをそれに等しくします。
例えば：- 

.yourDiv{
    height:50px;
    line-height:50px;
 }

jsfiddle

于 2013-05-10T16:45:50.073 に答える