Re: [問題] 這種區塊配置的css應該怎麼寫?
※ 引述《ss163500 (ss163500)》之銘言：
: -----------------------------------------
: | │
: | ┌───┐ │
: | │ 圖 │字字字字字字字字字字字字字 │
: | │ │字字字字字字字字字字字字 │
: | └───┘ │
: | │
: -----------------------------------------
: 如圖，一個寬度固定的div，裡面放上文字與小圖，字數跟圖片大小都不固定
: 圖片靠左，文字靠右
: 而且希望他們在div當中垂直置中，而且從ie6~chrome都沒有相容性問題
: (別叫我放棄ie6，我可不想叫別人升級之後，他的反而不能上網了，我還得負責)
: HTML這樣寫
: <div class="inner"><img src="xxx.jpg"><p>字字字字字字字字字字字字</p></div>
: CSS裡則是設定.inner img{float:left;margin:5px;}
: 那請問我該怎麼讓文字在div中永遠垂直置中呢?
: css跟html部分應該怎麼寫比較好?
: 因為div高度不同，所以div的height跟line-height設同一高度的沒效
: 用table做的話瞬間就可以做完收工了，可是還是想知道css解法是怎麼寫??
: 又如果div高度固定，但是內容有時候只有多一兩行的差異
: 設相同的height跟line-height，卻又無法讓整段文字在div中垂直置中
: 請問各位大大又應該怎麼寫??
現代的瀏覽器 可以使用table-cell + vertical-align
舊版的 可用css expression
/* CSS 可隨意變換.inner 高度 */
.inner{border:1px dashed
#ccc;width:500px;height:300px;text-align:center;display:table-cell;
vertical-align: middle;}
.inner img{float:left;margin-right:5px;}
.middle{width:200px;display:inline-block;*zoom:1;*display:inline;text-align:left;
+margin-top:expression( (this.parentNode.clientHeight-this.clientHeight)/2
+'px');}
<!-- DOM -->
<div class="inner">
<div class="middle">
<img src="//dummyimage.com/50x50">
<p>字字字字字字字字字字字字字字字字字字字字字字字字</p>
</div>
</div>
demo
http://fiddle.jshell.net/pKCLG/1/show/light/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.45.229.57
推
01/09 16:36, , 1F
01/09 16:36, 1F
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 2 之 2 篇)：