【问题标题】：SVG image and text alignSVG 图像和文本对齐
【发布时间】：2019-05-14 14:10:24
【问题描述】：

我想在按钮位置创建一个带有中心 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>

我该如何解决这个问题？

【问题讨论】：

尝试在您的图像上设置display: block（在您的情况下为.icon-64），看看是否可以解决问题。
sn-p 实际上是无用的，因为你的 php 注入 :(
请问您的项目中只能使用英文吗？我不得不维护其他开发人员的代码，这些开发人员用本地语言编写了名称和类。

标签： html css svg

【解决方案1】：

你应该在行上使用display:flexalso 并稍微调整你的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>

【讨论】：

【解决方案2】：

试试这个例子，

我在你的 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>

希望这对你有帮助。

【讨论】：

【解决方案3】：

带有文本中心的图像

如果你想让文本居中，我们可以做两个简单的事情来居中

如果文字比图片大：

我们使用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>

【讨论】：