SVG image and text align

svg vertical-align
svg text vertical align
svg image with text
material-icons align with text
text to svg
svg rectangle with text
svg text/javascript
align text middle svg

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>

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>

Align SVG Icons to Text and Say Goodbye to Font Icons, svg-icon handler class to hold the size and be relative positioned so that I can absolute position the SVG inside of it. Moving the icon down by “-0.125em” allows me to pull down the icon by 12.5% at any scale. The first example shows that DOM elements align to the baseline of text by default. The icons align to your text easily and can be modified by changing the font-size of the element. There is no clearly defined way for styling an SVG icon system. I’ve seen some systems custom style and place each icon in their library. This route sounds painfully unsustainable if you utilize more than 15 icons in your UI.

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>

alignment-baseline, Getting SVG icons aligned with text in an anchor "button" was proving to be a pain. Apply display: inline-block to the anchor parent and also to the S Centering image with SVG. Ask Question How to place and center text in an SVG rectangle. 145. Responsive image align center bootstrap 3.

Text vertically aligned with inline SVG icons, CSS image sprites; Inline images. Regardless of your preference (cough, SVG, cough!), the format of your icons will have a lot to do with how  Regardless of your preference (cough, SVG, cough!), the format of your icons will have a lot to do with how you align them to text. Let’s say all your icons are contained in a sprite. That means the icons are pretty much set at fixed dimensions (unless you start large and use background-size to scale down) and it would be much easier to

Tips for Aligning Icons to Text, Text that is to be rendered as part of an SVG document fragment is specified using the 'text' element. For example, Western glyphs are aligned at the bottom of capital letters, This SVG 1.1 image doesn't work in Firefox, even nightly. Firefox  The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.

Text, The layout of SVG text is based on rules provided in font tables, however that layout and the alignment of individual glyphs can be adjusted. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Align svg to center of screen [duplicate]

SVG Text Layout And Alignment, it: If it's the parent, you could just do x="50%" y ="50%" . Slideshow Slideshow Gallery Modal Images Lightbox Responsive Image Grid Image Grid Tab Gallery Image Overlay Fade Image Overlay Slide Image Overlay Zoom Image Overlay Title Image Overlay Icon Image Effects Black and White Image Image Text Image Text Blocks Transparent Image Text Full Page Image Form on Image Hero Image Blur Background Image

Comments
  • Try setting display: block on your images (.icon-64 in your case) and see if that fixes it.
  • The snippet is actually useless because of your php injects :(
  • 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.