1. 程式人生 > >HTML5佈局2個div一行。一個在左邊,一個在中間,並且中心線對齊

HTML5佈局2個div一行。一個在左邊,一個在中間,並且中心線對齊

先上一下效果圖:

如圖所示:返回按鈕在左邊。下一步的按鈕在中間位置。它們在一行。並且水平對齊。

程式碼如圖:

<div style="display:flex;background: #0BB20C;position: relative;margin-top: 100px">
    <img src="img/back.png" style="margin-left: 20px;position: absolute;height: 40px;line-height: 40px;">
    <div style="margin:0 auto;background: #CE3C39;height: 40px;line-height: 40px;position: relative">下一步</div>
</div>

圖中 關鍵程式碼如下幾處。首先最外層 佈局 為:display:flex;  

內層。第一個圖示懸浮佈局。第二哥圖片相對佈局。這樣margin:0 auto;可以實現居中效果。

這裡 為了控制圖示和 div內部水平線對齊。所以需要設定height: 40px;line-height: 40px 屬性都相同。所以你們自行調整大小。。保證相同即可