Clever Geek Handbook

How do I center the text below the image?

I have three tags h1

that I want to align with three images. How can i do this? I want the text to be aligned below the image, but the code I have now doesn't work at all.

.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>
Run codeHide result


+3


source to share


4 answers 


.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>
Run codeHide result




Notes:

  • Make the parent img

    and h1

    container flex item.
  • Stack flex items vertically.
  • Horizontally centered elements.
+1


source


you don't need display: flex

a title. This is partly to blame.

Instead, you would like to consider:



.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>
Run codeHide result


By placing the image in the header, the visible text acts as a label for the image, so you don't need to add additional alt text as it's purely there for decoration.

0


source


Take out display: flex from h1 and style like this

Picture below

.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>
Run codeHide result


0


source 


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

First give the img a width that is a percentage of the column width, then with the margin left and right auto will be center in your div, and then with text-align: center you center your hedear text under your image with in the column, here's the idea and above code.

-1


source






More articles:


All Articles