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

您还应该在行上使用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>

Answer 3

带有文本中心的图像

如果您希望文本ti居中，我们可以做两个简单的事情来使文本居中

如果文本较大，则图像：

• 我们使用margin: 0 auto;和display:block;将图像居中放置在容器中
  参见Margin 0 auto

如果文字较小，则图片

• 我们可以简单地设置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>