前端基礎學習筆記 圖片和元素的居中對齊
阿新 • • 發佈:2018-11-24
圖片對齊
首先看文字居中方式:
上下居中:給文字一個line-height,最好和文字盒子大小相同。
左右居中:給文字一個text-align:center;
考慮到文字與圖片對齊用到基線對齊,所以圖片在盒子裡居中的方式為:
text-align和line-height放在父級元素裡,在img標籤裡放與行內元素基線對齊。
div{ width:200px; height:200px; text-align:center; line-height:200px; } img{ width:100px; vertical-align:middle; }
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>
元素對齊
元素在父元素裡的居中方式:和圖片類似,加一個inline-block,把其變成行內元素。
div{ width:200px; height:200px; text-align:center; line-height:200px; } p{ display:inline-block; width:100px; height:100px; width:100px; vertical-align:middle; }
<body>
<div>
<p></p>
</div>
</body>