我正在努力实现以下目标:
1)我想将文本水平和垂直放在div中。
2)我希望所有div的左边距除了极值之外的所有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 here ----&gt; https://jsfiddle.net/qf3t8725/
感谢。
答案 0 :(得分:1)
1)将文本水平和垂直居中于div.try
.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;
}
答案 1 :(得分:1)
如果你真的想要margin-left
除了第一个和最后一个以外的所有div你可以这样做。
.homepage-banner-hc-description-items{
height: 150px;
background-color: yellow;
margin-left: 15px;
}
.homepage-banner-hc-description-items:first-child{
margin-left:0px;
}
.homepage-banner-hc-description-items:last-child{
margin-left:0px;
}