1. 程式人生 > >前端基礎學習筆記 圖片和元素的居中對齊

前端基礎學習筆記 圖片和元素的居中對齊

圖片對齊

首先看文字居中方式:

上下居中:給文字一個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>