1

画像とテキストがあります。<div両方を垂直方向に>の中央に配置したいと思います。タグ内の何も変更せずにこれを行うにはどうすればよいですか？<img>

私は多くの人が次のことを提案していることを知っています：

<div>
<img style="vertical-align:middle; height: 30px;" src ="image.png"/>
<span style="line-height: 30px;" > my text </span> 
</div>

<img>なんらかの理由で、タグの内容は変更したくありません。<div>または<span>他の場所にスタイルを追加するだけで、両方を中央に配置できますか？

ちなみに、次のことがうまくいくと言う人もいることも知っています。

<div>
<img height=30px; src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>

しかし、それは私にとってはうまくいきません。それで、何かアイデアはありますか？

ありがとう。

4

1 に答える 1

4

これを試してください-http://jsfiddle.net/J4QJA/

div {
    height: 300px;
    background: beige;
    line-height: 300px;
}

img {
    vertical-align: middle;
}
​

..。

アップデート

スタイルを適用できない/適用したくない場合は<img>、ラッパーを使用できます-http://jsfiddle.net/J4QJA/3/

HTML

<div class="wrapper">
    <div class="image-wrapper">
        <img src="http://lorempixel.com/200/100" />
    </div>
    <div class="image-wrapper">
        Lorem ipsum doloe sit amet
    </div>
</div>​

CSS

div.wrapper {
    height: 300px;
    background: beige;
}

div.image-wrapper {
    display: block;
    position: relative;
    top: 50%;
    margin-top: -50px; /* half of your image height */
    line-height: 100px;
    width: 200px;
    float: left;
}
于 2012-07-01T22:28:01.117 に答える