Question

我这里一行包含六列图像和文字：https://i.imgur.com/UKGGCrX.png

我想将两行文本（例如资源和储量）与“勘探”和“地质数据”对齐。 https://i.imgur.com/Tplzivb.png

在图像下方添加页边距并不能解决问题，也不能在文本上方添加页边距...也尝试为图标设置min-height，但这也没有实现。 / p>

我该怎么做？

Answer 1

使用flexbox，您可以轻松地在“顶部”对齐文本。这是默认的flexbox行为，不会在“基线”上对齐文本：

.container{
display: flex;
flex-flow: row nowarp;
}

.text{
  max-width: 30px;
}

<html>

<div class="container">

  <div class="imgt">
    <img src="https://dummyimage.com/20x20">
    <div>Some Text</div>
  </div>
  <div class="imgt">
    <img src="https://dummyimage.com/20x20">
    <div class="text">Some Long long Text</div>
  </div>
</div>


</html>

我假设您在某个地方有一个margin-top: auto;和margin-bottom: auto;或某些align-items: center;之类的flexbox属性，您的文本就位于div的中心。

Answer 2

您可以使用弹性样式来获得所需的结果。我创建了一个示例，显示align-items如何：属性将有助于使图标/图像/内容与同级对齐。

实时示例：https://codepen.io/SROwl/pen/xNrRmw

HTML：

<h3> align content top </h3>
<div class="bucket-row">
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Single Line</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Double Line Title</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Double Line Title</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Single Line</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Triplen Extra Line Title</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Double Line Title</span>
  </div>
</div>
<h3> align content bottom </h3>
<div class="bucket-row content-end">
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Single Line</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Double Line Title</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Double Line Title</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Single Line</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Triplen Extra Line Title</span>
  </div>
  <div class="bucket">
    <img src="https://dummyimage.com/85x85">
    <span>Double Line Title</span>
  </div>
</div>

SCSS：

body {
  font-family: sans-serif;
}
.bucket-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 600px;
  margin-bottom: 40px;
  .bucket {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 85px;
    background-color: #eee;
    padding-bottom: 20px;
    img {
      margin-bottom: 15px;
    }
  } 

  &.content-end {
    .bucket {
      span {
        margin-top: auto;
      }
    }
  }
}

如何将跨度文本与其他列中的文本对齐？

2 个答案: