图像，标题和文本的对齐

NickW 发表于 Dev

尼克

我正在尝试对齐三个div的内容，以使图像，标题和文本的开头（因为我不够清楚而改变）水平对齐，并且图像如图所示偏移。我尝试了几种方法（包括将图像包装器设置为固定大小），但是当我更改浏览器的大小时，它们似乎都无法很好地缩放-通常会导致文本和图像之间的间隙大小也发生变化很多，看起来很奇怪。

这是我要排队的设计：

我想要达到的目标：

The problem is that each of the sizes of the images is based on the width of its container. If I set an image-wrapper height (the blue border), in order to align the text below it, it causes problems when the browser gets smaller and/or larger. For example, this is what happens with the same fixed wrapper height at a narrower browser size:

Is there a best practice or something for this type of layout/design?

I've created a codepen to show the problem more clearly, here

.container {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  top: 15rem;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  border: 1px solid red;
}

.card-image-wrapper {
  border: 1px solid blue;
  transform: translateY(-5rem);
  /*height: 20rem; can use this to align the text, but it doesn't scale well */
}

.wrapper-1 {
  width: 50%;
}

.wrapper-2 {
  width: 25%;
}

.wrapper-3 {
  width: 38%;
}

.card-image {
  width: 100%;
}

<div class="container">
  <div class="card">
    <div class="card-image-wrapper wrapper-1">
      <img src="https://cdn.inquisitr.com/wp-content/uploads/2016/08/Zombieland-Writers-Explain-How-They-Secured-Bill-Murray-For-That-Legendary-Cameo3-670x388.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque neque quisquam omnis incidunt laborum delectus deleniti, aliquid magnam, sit, autem eos perferendis saepe iure aut provident minus molestiae similique! Eveniet debitis accusamus,
      rerum illo dicta at atque quidem, ratione laboriosam doloribus, tempore optio nostrum vel sit. Fuga ipsam beatae doloremque.</div>
  </div>

  <div class="card">
    <div class="card-image-wrapper wrapper-2">
      <img src="https://d919ce141ef35c47fc40-b9166a60eccf0f83d2d9c63fa65b9129.ssl.cf5.rackcdn.com/images/76053.max-620x600.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta, ullam accusantium deserunt optio laborum nobis voluptates dolorem maxime ad omnis dolorum. Nisi esse maiores necessitatibus omnis voluptatem repudiandae obcaecati maxime dolores, cumque
      quod pariatur magni sunt incidunt rem voluptatum commodi laborum odio vel? Quisquam culpa a praesentium eligendi aut totam commodi ab eius quis, eos, animi, amet minus debitis unde.</div>
  </div>

  <div class="card">
    <div class="card-image-wrapper wrapper-3">
      <img src="https://d2npu017ljjude.cloudfront.net/images/regular-43/w735/92783-11.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id molestias distinctio recusandae impedit iste ipsum, mollitia non laudantium incidunt saepe omnis error natus exercitationem alias quas in, nobis sed aliquam minima adipisci amet magnam.
      Perferendis nostrum, dicta consequatur odit aliquid placeat sequi porro fuga enim?</div>
  </div>
</div>

Edit: Just to make it clear, I'm trying to make the headings and text line up horizontally. I'll add a second picture shortly

theblindprophet

Here you go: https://codepen.io/anon/pen/jvwVor

位置.card-image-wrapper在页面顶部，高度基本上为0。将其他所有内容都放在底部。然后将img内部居中.card-image-wrapper。

 display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  min-height: 25rem;
  border: 1px solid red;
}

.card-image-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid blue;
  height: 1px;
}

.card-heading {
  margin-top: 15rem;
}

这是假设您的图片不是很高的。如果要全部对齐3个，则必须确保图片短于一定高度。否则，您将必须通过JavaScript确定最高利润。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-24

我来说两句

0 条评论

登录后参与评论

上一篇：Symfony 4选民-角色和权限问题

TOP 榜单

文章

图像，标题和文本的对齐

图像，标题和文本的对齐

Linux的官方Adobe Flash存储库是否已过时？

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

错误：“ javac”未被识别为内部或外部命令，

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Modbus Python施耐德PM5300

为什么Object.hashCode（）不遵循Java代码约定

如何检查字符串输入的格式

检查嵌套列表中的长度是否相同

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

如何自动选择正确的键盘布局？-仅具有一个键盘布局

如何正确比较 scala.xml 节点？

在令牌内联程序集错误之前预期为 ')'

如何在JavaScript中获取数组的第n个元素？

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

如何监视应用程序而不是单个进程的CPU使用率？

解决类Koin的实例时出错

ES5的代理替代

有什么解决方案可以将android设备用作Cast Receiver？

VBA 自动化错误：-2147221080 (800401a8)

套接字无法检测到断开连接