下邊距不工作，超越父DIV

我有div內的文本與message類，我想給div對於移動垂直中心於母公司div與banner類。下邊距不工作，超越父DIV

請參考這裏的的jsfiddle - https://jsfiddle.net/1rbhuwfs/

每當我嘗試設置margin-bottom，它超越了父div下去，我不明白爲什麼越來越多。母公司div上有display: block。

我更喜歡在我的代碼中沒有任何position: absolute。

在此先感謝。

2017-02-22 Shaarad Dalvi

檢查以下片斷中，我已經加入

.banner > div { 
    vertical-align:middle; 
}

和刪除margin-bottom: 40px;形式.message。尊重圖像和文本的DIV保證金底 - - 垂直居中不position: absolute或使用表

.banner { 
 
    height: 100px; 
 
    background-color:#4d1242; 
 
    margin: 0 1px; 
 
    display: block; 
 
} 
 

 
.banner > div { 
 
    vertical-align:middle; 
 
} 
 

 
.img-1-holder { 
 
    display: inline-block; 
 
    margin-left: 15px; 
 
} 
 

 
.img1 { 
 
    height: 70px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.img-2-holder { 
 
    display: inline-block; 
 
} 
 

 
.img2 { 
 
    height: 100px; 
 
} 
 

 
.message { 
 
    display: inline-block; 
 
}

<div class="banner"> 
 
    <div class="img-1-holder"> 
 
    <img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif"> 
 
    </div> 
 
    <div class="message"> 
 
    Some random text here 
 
    </div> 
 
    <div class="img-2-holder"> 
 
    <img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif"> 
 
    </div> 
 
</div>

來源

2017-02-22 12:53:38 aje

一種方法是使用Flexbox的：

添加/更改此：

.banner { 
    display: flex; 
    align-items: center; 
}

https://jsfiddle.net/5496yk1k/

來源

2017-02-22 12:54:04 Johannes

檢查jsfiddle，將父母設爲display:table，子女設爲display: table-cell and vertical-align: middle。

https://jsfiddle.net/ggq39acr/

來源

2017-02-22 12:55:46

可以使用Flexbox的fiddle

.banner { 
height: 100px; 
background-color:#4d1242; 
margin: 0 1px; 
display: flex; 
justify-content: center; 
align-items: center; 
}

在這種情況下，你可以去除

.img1 { 
    height: 70px; 
} 
.message { 
    display: inline-block; 
}

來源

2017-02-22 12:56:54

你可以參照這個太邊緣。 https://www.w3.org/Style/Examples/007/center.en.html

解決方案建議在這個鏈接一般工作！：d

來源

2017-02-22 12:58:32 Hardhik

您可以嘗試包括普通類的假設img-inline內聯CSS屬性和類中的.IMG-1持有人管理其他的CSS屬性，.IMG-2持有者和.message

這裏一個示例代碼給你。你可以在你的jsfiddle中試試它。對不起，我不在這裏發佈小提琴鏈接。

HTML代碼

<div class="banner"> 
    <div class="img-inline img-1-holder"> 
    <img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif"> 
    </div> 
    <div class="img-inline message"> 
    Some random text here 
    </div> 
    <div class="img-inline img-2-holder"> 
    <img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif"> 
    </div> 
</div>

CSS代碼：

.banner { 
    height: 100px; 
    background-color:#4d1242; 
    margin: 0 1px; 
    display: block; 
} 

.img-1-holder { 
    margin-left: 15px; 
} 

.img1 { 
    height: 70px; 
    margin-bottom: 15px; 
} 

.img-2-holder { 
    margin-left: 15px; 
} 

.img2 { 
    height: 100px; 
} 

.img-inline { 
    display: inline-block; 
    vertical-align: middle; 
}

希望這有助於:)

來源

2017-02-22 13:36:55 Mayank

下邊距不工作，超越父DIV

回答

相關問題