horizontal und vertikal Mitte Text in einem div

Question

Ich kämpfe folgendes zu erreichen:

1) ich meinen Text horizontal zu zentrieren möchte und vertikal in einem div.

2) Ich möchte einen linken Rand mit allen divs außer den an den Extremen. (zuerst links und zuletzt rechts), auch wenn die Größe der Seite geändert wird.

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>

werde ich jede Hilfe und Korrektur unserer Community zu schätzen wissen.

JSfiddle hier ---->https://jsfiddle.net/qf3t8725/

Dank.

Answer 1

1) Text horizontal zentriert und vertikal in einem div.try diese

.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

Wenn Sie wirklich margin-left wollen alle divs außer erste und letzte Sie mögen dies tun könnte.

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