Wie kann ich Text unter einem Bild zentrieren?

Question

Ich habe drei h1 Tags, die ich mit drei Bildern ausgerichtet werden soll. Wie kann ich das machen? Ich möchte, dass der Text unter dem Bild ausgerichtet wird, aber der Code, den ich jetzt habe, ist ziemlich weit weg.

.column { 
 
    max-width: 960px; 
 
    padding: 0 100px; 
 
} 
 

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

 
.column>h1 { 
 
    display: flex; 
 
    font-family: 'Montserrat-Bold'; 
 
    font-size: 30px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Design</h1> 
 
    </div> 
 

 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Code</h1> 
 
    </div> 
 

 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design"> 
 
    <h1>Collaborate</h1> 
 
    </div> 
 
</div>

Answer 1

.column { 
 
    display: flex;    /* new (1) */ 
 
    flex-direction: column; /* new (2) */ 
 
    align-items: center;  /* new (3) */ 
 
    max-width: 960px; 
 
    padding: 0 100px; 
 
} 
 

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

 
.column > h1 { 
 
    /* display: flex; <--- remove; not necessary */ 
 
    font-family: 'Montserrat-Bold'; 
 
    font-size: 30px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Design</h1> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Code</h1> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design"> 
 
    <h1>Collaborate</h1> 
 
    </div> 
 
</div>

Hinweise:

1. Make Eltern von img und h1 Elemente ein Flex-Container.
2. Flexible Elemente vertikal anordnen.
3. Horizontal Flex Elemente zentrieren.

Answer 2

Sie brauchen nicht die display: flex auf die Überschrift. Das ist teilweise schuld.

Stattdessen würden Sie in Betracht ziehen:

.heading { 
 
text-align: center; 
 
} 
 

 
.heading span { 
 
    display: block; 
 
    margin-top: 6px; 
 
}

<h1 class="heading"> 
 
    <img src="http://placehold.it/350x150" alt="" /> 
 
    <span>Title Text</span> 
 
</h1>

von innerhalb der Rubrik das Bild platzieren, wirkt der sichtbare Text als Bezeichnung für das Bild, so dass Sie nicht brauchen Fügen Sie zusätzlichen alternativen Text hinzu, da dieser nur zur Dekoration dient.

Answer 3

.column img{width:80%; margin-left:auto; margin-right:auto;} 
.column h1{text-align:center;} 

Zuerst geben Sie die img es Breite, die dann von Prozent von der Spaltenbreite ist mit Rand links und rechts Auto wird es Mitte in Ihrem div sein dann text-align, indem sie: center Sie den Text wird zentriert dein hedear unter deinem bild mit in der spalte hier die idee und oben ist der code.

Answer 4

Display herausnehmen: flex von h1 und Stil wie folgt

Snippet unten

.column { 
 
    max-width: 960px; 
 
    padding: 0 100px; 
 
} 
 

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

 
.column>h1 { 
 
    font-family: 'Montserrat-Bold'; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    border: solid red; 
 
    margin-top: 0; 
 
} 
 

 
img { 
 
    border: solid blue; 
 
} 
 

 
.column>h1 { 
 
    margin-bottom: 0; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Design</h1> 
 
    </div> 
 

 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Code</h1> 
 
    </div> 
 

 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design"> 
 
    <h1>Collaborate</h1> 
 
    </div> 
 
</div>