SVG image and text align

Question

I would like to create a grid with a center svg icon with descriptive text in the button position, like this:

but unfortunately I can not align everything correctly

My code:

.colonna {
  flex: 50%;
  padding: 10px
}

.icona {
  width: 100%
}

.centro-div {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

.icon-64 {
  width: 64px;
  height: 64px;
}

<div class="riga">
  <div class="colonna centro-div">
    <div class="icona"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/hotel-booking.svg" alt="Prenota Hotel" class="icon-64"></div>Cerca Hotel</div>
  <div class="colonna centro-div"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/volo-booking.svg" alt="Prenota Volo" class="icon-64"><br> Cerca Volo</div>
</div>

how can I fix this?

Try setting `display: block` on your images (.icon-64 in your case) and see if that fixes it. — Jake, Dec 13 '18 at 11:16
The snippet is actually useless because of your php injects :( — Limbo, Dec 13 '18 at 11:20
Could you please only use english in your project? I have had to maintain code from other developers that wrote names and classes in there native language. — Persijn, Dec 13 '18 at 12:17

score 2 · Answer 1 · answered Dec 13 '18 at 11:29

Try with this example,

i have updated some style in your css.

.colonna {
  flex: 50%;
  padding: 10px;
  
}

.icona {
  width: 100%;
  border:2px solid #ddd;
  padding:20px;
  width:200px;
  text-align:center;
}
.icona img{display:block;}
.centro-div {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

.icon-64 {
  width: 64px;
  height: 64px;
  margin:0 auto;
}

<div class="riga">
  <div class="colonna centro-div">
    <div class="icona">
      <img src="https://banner2.kisspng.com/20171220/oqq/rainbow-png-image-5a3ad6797f9c30.14712925151380543352278356.jpg" alt="Prenota Hotel" class="icon-64"/>
      <span>Cerca Hotel</span>
    </div>
    </div>
    </
   
</div>

Hope this will be helpfull for you.

score 0 · Answer 2 · answered Dec 13 '18 at 11:22

You should use display:flexalso on the row and adjust your html structure just a little:

.riga {display: flex}
.colonna {
  flex: 50%;
  padding: 10px
}

.icona {
  width: 100%
}

.centro-div {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  /*justify-content: center;*/
}

.icon-64 {
  width: 64px;
  height: 64px;
  vertical-align:middle
}

<div class="riga">
  <div class="colonna centro-div">
    
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/hotel-booking.svg" alt="Prenota Hotel" class="icon-64">
      <p>Cerca Hotel</p>

  </div>
  <div class="colonna centro-div">
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/volo-booking.svg" alt="Prenota Volo" class="icon-64">
      <p>Cerca Volo</p>
  </div>
</div>

score 0 · Answer 3 · answered Dec 13 '18 at 13:04

Image with text center

If you want the text ti be in the center we can do two simple things to center it

If the text is larger then the image:

We center the image inside its container with margin: 0 auto; and display:block;
see Margin 0 auto

If the text is smaller then the image

We can simply set text-align: center;.

We cant use text-align center alone if the text is larger. This is because it container will grow with the text, but the image will just be left aligned.

/*Divs are by default block displayed. We don't want them to take all width*/
.image-block {
  display: inline-block;
  padding: 10px;
}

/*text larger then container*/
.image-block img {
  display: block;
  margin: 0 auto;
}
/*Container smaller then text*/
.image-block .text {
  text-align: center;
}

<div>
  <div class="image-block">
    <img src="https://picsum.photos/100" />
    <div class="text">Image text below image</div>
  </div>
   <div class="image-block">
    <img src="https://picsum.photos/100" />
    <div class="text">desc</div>
  </div>
</div>

SVG image and text align

3 Answers3

Image with text center