下边距不工作，超越父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

回答

相关问题