CSS ausrichten Elemente nebeneinander zentriert

Question

Ich habe folgendes:

html

<div class="img-container"> 
    <div class="google"> 
     <a href="path to app on play store"><img class="google-img" 
      src="images/google-play-badge.png"></a> 
    </div> 

    <div class="apple"> 
     <a href="path to app on apple store"><img class="apple-img" 
      src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a> 
    </div> 

    <div class="web"> 
     <a href="www/index.html"><img class="web-img" 
      src="images/view-on-web.svg"></a> 
    </div> 
</div> 

css

.img-container { 
    text-align: center; 
} 

.img-container .apple, .img-container .google, .img-container .web { 
    float: left; 
    padding: 10px; 
    padding-left: 20px; 
} 

.img-container .google { 
    padding-top: 4px; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

Wie Sie sehen können, Ich mache eine float: left;, so dass die 3 Elemente nebeneinander stehen. Ich versuche auch text-align: center;, um die Elemente zu zentrieren, aber es hat keine Wirkung.

Frage

Wie halte ich die drei Elemente nebeneinander, und zentriert auf der Seite aufgereiht?

Dank

Answer 1

Verwendung display:inline-block; statt Schwimmer und Sie sind gut

.img-container { 
 
    text-align: center; 
 
} 
 

 
.img-container .apple, 
 
.img-container .google, 
 
.img-container .web { 
 
    display:inline-block; 
 
    padding: 10px; 
 
    padding-left: 20px; 
 
} 
 

 
.img-container .google { 
 
    padding-top: 4px; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
}

<div class="img-container"> 
 
    <div class="google"> 
 
    <a href="path to app on play store"><img class="google-img" src="images/google-play-badge.png"></a> 
 
    </div> 
 

 
    <div class="apple"> 
 
    <a href="path to app on apple store"><img class="apple-img" src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a> 
 
    </div> 
 

 
    <div class="web"> 
 
    <a href="www/index.html"><img class="web-img" src="images/view-on-web.svg"></a> 
 
    </div> 
 
</div>

Answer 2

Ein anderer Weg, es zu gehen, zu tun ist, flex auf dem Elternteil zu verwenden, dann justify-content: center zum Zentrum der Inhalt horizontal. Sie können dann andere Flex-Eigenschaften wie align-items verwenden, um auch vertikal auszurichten.

.img-container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.img-container .apple, 
 
.img-container .google, 
 
.img-container .web { 
 
    padding: 10px; 
 
    padding-left: 20px; 
 
} 
 

 
.img-container .google { 
 
    padding-top: 4px; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
}

<div class="img-container"> 
 
    <div class="google"> 
 
    <a href="path to app on play store"><img class="google-img" src="images/google-play-badge.png"></a> 
 
    </div> 
 

 
    <div class="apple"> 
 
    <a href="path to app on apple store"><img class="apple-img" src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a> 
 
    </div> 
 

 
    <div class="web"> 
 
    <a href="www/index.html"><img class="web-img" src="images/view-on-web.svg"></a> 
 
    </div> 
 
</div>