div内のテキストを水平方向と垂直方向に合わせる

Question

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/

感謝。

Answer 1

1）あなたは本当に最初以外のすべてのdivをmargin-leftし、あなたは、このように行うことができ、最後にしたい場合は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; 
} 

Answer 2

をテキストを中央揃えにします。

.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; 
}