1. 程式人生 > >使用display:table-cell 和 vertical-align:middle 不定寬高圖片居中於容器

使用display:table-cell 和 vertical-align:middle 不定寬高圖片居中於容器

.phone a{ display: table-cell;text-align: center; vertical-align: middle; width: 50px; height: 50px;
	border: 2px solid #d3d3d3; border-radius: 50%; }
.phone a img{ vertical-align: middle;}


注意,外面的容器不要加浮動屬性,這樣就不會垂直居中顯示了,還有此時設定a標籤的margin屬性是不起作用的,

然後我想的一個比較笨的解決辦法,就是使用相對定位製造間距。

我想要實現這種效果


但是無奈,在給左側logo,和右側導航分別加了display:table-cell之後,實現的效果確實這樣


問題出在了其父元素沒有table屬性,給它們的父元素加上display:table就可以啦