SVG изображение и текст выравнивания

Question

Я хотел бы создать сетку с центральным значком SVG с описательным текстом в позиции кнопки, например:

, но, к сожалению, я не могу все выровнять правильно

Мой код:

.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>

как я могу это исправить?

Answer 1

Попробуйте на этом примере:

Я обновил стиль в вашем 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>

Надеюсь, это поможет вам.

Answer 2

Изображение с текстовым центром

Если вы хотите, чтобы текст находился в центре, мы можем сделать две простые вещи для его центрирования

Если текст больше, чем изображение:

• Мы центрируем изображение внутри контейнера с помощью margin: 0 auto; и display:block;
  см. Поля 0, авто

Если текст меньше, тоimage

• Мы можем просто установить text-align: center;.

Мы не можем использовать только выравнивание текста по центру, если текст больше.Это связано с тем, что контейнер будет расти вместе с текстом, но изображение будет выровнено по левому краю.

/*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>

Answer 3

Вы должны использовать display:flex также в строке и немного изменить структуру HTML:

.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>