时间戳

首页 > 解决方案 > 居中无间隙的图像和文本

html - 居中无间隙的图像和文本

问题描述

我有 2 个带有图像和文本的块。我需要将它们垂直和水平居中。我使用 flexbox，但是当文本较长时 - 图像和文本之间会出现填充。如何删除此填充1

.product-teaser {
  width: 235px;
  height: 340px;
  margin: 10px;
}
img {
  margin-right: 5px;
}
.product-teaser-stock {
  font-size: 10px;
  font-family: "Open Sans";
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 17px;
}
<!DOCTYPE html>
<html>
<head>
  <title>Another simple example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="product-teaser">
    <div class="product-teaser-stock product-teaser-stock-undefined date-available" style="color:#009900;">
    <img class="free-shipping-icon" width="30" src="https://shop.dev.pictureserver.net/images/pic/70/3c/undef_src_shop_shop_id_1_type_shipping_image.png" alt="" title="">
    <span class="stock_title">FREE shipping, available from 03.02.2021</span>
  </div>
  <div class="product-teaser">
      <div class="product-teaser-stock product-teaser-stock-undefined date-available" style="color:#009900;">
      <img class="free-shipping-icon" width="30" src="https://shop.dev.pictureserver.net/images/pic/70/3c/undef_src_shop_shop_id_1_type_shipping_image.png" alt="" title="">
      <span class="stock_title">FREE shipping</span>
    </div>
</div>
</body>
</html>

标签： htmlcss

解决方案

如果我理解你的问题，你想让 product-teaser 的第一个 div 中的文本.product-teaser。

我建议您使用带有 stock_title 类的块.stock_title来将文本向左对齐，以避免图像和左侧之间的间隙。

我想这段代码会有所帮助

.stock_title {
  text-align: left;
}

推荐阅读