背景色を下まで表示して画像を常に真ん中に配置したい

質問

• HTMLとCSSを使用して、背景色を下まで表示して画像を常に真ん中に配置したい場合、以下の設定を行います。
• HTMLの要素には、背景色を指定するためのIDを追加し、CSSでそのIDに関連するスタイルを設定します。
• また、画像を中央に配置するために、floatプロパティを使用して要素を左右に配置します。

回答No.1

warpspace

１例です。アレンジしてどうぞ。

<style type="text/css">
.case05 {
background:green;
width:355px;
}
.case05 img {
display: inline-block;
vertical-align: middle;
}
.case05 .txt {
display: inline-block;
vertical-align: middle;
width:250px;
background:yellow;
}
</style>

<div class="case05">
<img src="http://dummyimage.com/100x100/000/fff.gif&text=img" alt="img" height="100" width="100">
<span class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキスト</span>
</div>

参考URL：

http://c-brains.jp/blog/wsg/11/10/13-200523.php

お礼

ご回答いただきありがとうございました。
参考になりましたです。