SVG 图像和文本对齐

Posted 2023-03-06

【中文标题】SVG 图像和文本对齐

【英文标题】：SVG image and text align

【发布时间】：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"  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"  class="icon-64"><br> Cerca Volo</div>
</div>

我该如何解决这个问题？

【问题讨论】：

尝试在您的图像上设置display: block（在您的情况下为.icon-64），看看是否可以解决问题。

sn-p 实际上是无用的，因为你的 php 注入 :(

请问您的项目中只能使用英文吗？我不得不维护其他开发人员的代码，这些开发人员用本地语言编写了名称和类。

【参考方案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"  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"  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 imgdisplay: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"  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>