我正在努力实现以下目标:
1) 我想将文本在 div 内水平和垂直居中。
2) 我想要所有 div 的左边距,除了最极端的。 (第一个在左边,最后一个在右边)即使页面大小调整也是如此。
body {
margin: 0;
}
.homepage-banner-grid {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.homepage-banner-hc-description-items {
height: 150px;
background-color: yellow;
}
.homepage-banner-hc-description-items > div {
margin-bottom: 15px;
}
#homepage-banner-hc-description-item1 {
background-color: pink;
margin-bottom: 15px;
}
#homepage-banner-hc-description-item2 {
background-color: green;
margin-bottom: 15px;
}
#homepage-banner-hc-description-item3 {
background-color: orange;
margin-bottom: 15px;
}
#homepage-banner-hc-description-item4 {
background-color: blue;
margin-bottom: 15px;
}
.homepage-banner-hc-description-items-icon {
disply: block;
float: left;
background-color: red;
width: auto;
height: auto;
}
.homepage-banner-hc-description-items-text {
display: flex;
}
<div class="homepage-banner">
<div class="homepage-banner-grid" id="homepage-banner-hc-description">
<div class="homepage-banner-hc-description-items" id="homepage-banner-hc-description-item1">
<div class="homepage-banner-hc-description-items-icon">
<img src="http://bailbondsstatesboro.com/wp-content/uploads/2016/07/24_7_service.png" width="100px" height="100px">
</div>
<div class="homepage-banner-hc-description-items-text">
<span>Vivamus massa felis, eleifend quis rhoncus id, finibus id velit.</span>
</div>
</div>
<div class="homepage-banner-hc-description-items" id="homepage-banner-hc-description-item2">
<div class="homepage-banner-hc-description-items-icon">
<img src="http://bailbondsstatesboro.com/wp-content/uploads/2016/07/24_7_service.png" width="100px" height="100px">
</div>
<div class="homepage-banner-hc-description-items-text">
<span>Vivamus massa felis, eleifend quis rhoncus id, finibus id velit.</span>
</div>
</div>
<div class="homepage-banner-hc-description-items" id="homepage-banner-hc-description-item3">
<div class="homepage-banner-hc-description-items-icon">
<img src="http://bailbondsstatesboro.com/wp-content/uploads/2016/07/24_7_service.png" width="100px" height="100px">
</div>
<div class="homepage-banner-hc-description-items-text">
<span>Vivamus massa felis, eleifend quis rhoncus id, finibus id velit.</span>
</div>
</div>
<div class="homepage-banner-hc-description-items" id="homepage-banner-hc-description-item4">
<div class="homepage-banner-hc-description-items-icon">
<img src="http://bailbondsstatesboro.com/wp-content/uploads/2016/07/24_7_service.png" width="100px" height="100px">
</div>
<div class="homepage-banner-hc-description-items-text">
<span>Vivamus massa felis, eleifend quis rhoncus id, finibus id velit.</span>
</div>
</div>
</div>
</div>
我将感谢我们社区的任何帮助和纠正。
JSfiddle 这里 ----> https://jsfiddle.net/qf3t8725/
谢谢。
最佳答案
1) 将文本在 div 内水平和垂直居中。试试这个
.homepage-banner-hc-description-items-text {
display: flex;
height: 140px;
text-align: center;
}
.homepage-banner-hc-description-items-text span {
margin-top: auto;
margin-bottom: auto;
}
关于javascript - div 中的文本水平和垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42152967/