SVG image and text align - html

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?

Answer 1

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.

Answer 2

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>

Answer 3

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>