将行 div 中的 3 个 div 与文本居中对齐答案

【问题标题】：Align 3 divs within row div with text centered将行 div 中的 3 个 div 与文本居中对齐
【发布时间】：2015-06-22 11:25:13
【问题描述】：

类似于How to align 3 divs (left/center/right) inside another div?，我正在尝试对齐父 div 中的三个 div。增加的复杂性是每个 div 都包含一个图像、文本和一个链接。我希望这些对齐链接：

[[LEFT-IMG]    [CENTER-IMG]    [RIGHT-IMG]]
    text           text            text
    link           link            link

但是，我能得到的最接近的是：

[[LEFT-IMG]    [CENTER-IMG]    [RIGHT-IMG]]
 text              text               text
 link              link               link

文本和链接镜像图像的对齐方式。

这是我的 HTML：

  <div class="row">
    <div class="col-4 left">
      <img src="http://placehold.it/250x150" alt="Thing 1">
      <p>THING 1</p>
      <a href="somedomain.com">somedomain.com</a>
    </div>
    <div class="col-4 center">
      <img src="http://placehold.it/250x150" alt="Thing 2">
      <p>THING 2</p>
      <a href="somedomain.com">somedomain.com</a>
    </div>
    <div class="col-4 right">
      <img src="http://placehold.it/250x150" alt="Thing 3">
      <p>THING 3</p>
      <a href="somedomain.com">somedomain.com</a>
    </div>
  </div>

我的 CSS：

.row {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
    display: flex;
    right: 0;
    text-align: center;
    flex-wrap: wrap;
}

.left {
    display: inline-block;
    text-align: left;
}

.right {
    display: inline-block;
    text-align: right;
}

.center {
    display: inline-block;
    margin: 0 auto;
}
.col-4 {
    width: 33.33%;
}

请注意，这些都在具有以下 CSS 的网格 div 中：

.grid {
    margin: 0 auto;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
}

我感觉我的结构存在根本问题，但我不确定是什么。在这方面非常新。

有什么想法吗？

更新：这是一个显示当前进度的 JSFiddle。 http://jsfiddle.net/ljhennessy/j8jrn719/

这里的关键是我希望左右图像一直对齐到两边的红色边框。

【问题讨论】：

你能做个小提琴吗？
@ljhennessy 你想要什么？这是您展示的第一个示例吗？
是的。左右图像必须与行的各自侧对齐。下方的文字和链接应在图片下方对齐。
@suslov, jsfiddle.net/ljhennessy/j8jrn719

标签： html css alignment text-alignment

【解决方案1】：

只需删除 col-4 类旁边的 class。

这是Jsfiddle link。

看起来像这样：

<div class="row">
  <div class="col-4">
    <img src="http://placehold.it/250x150" alt="Thing 1">
    <p>PROJECT 1</p>
    <a href="somedomain.com">somedomain.com</a>
  </div>
  <div class="col-4">
    <img src="http://placehold.it/250x150" alt="Thing 2">
    <p>THING 2</p>
    <a href="somedomain.com">somedomain.com</a>
  </div>
  <div class="col-4">
    <img src="http://placehold.it/250x150" alt="Thing 3">
    <p>THING 3</p>
    <a href="somedomain.com">somedomain.com</a>
  </div>
</div>

要使您的图像适合该列，只需将此代码添加到您的 css：

img {
    width: 100%;
}

希望对你有帮助。

【讨论】：

感谢您的链接！之前没用过Jsfiddle，很有帮助。
我创建了一个 JSFiddle jsfiddle.net/ljhennessy/j8jrn719。问题（如您所见）是图像仍未与行的左右对齐（即红色边框）。
只需为您的图像添加样式。宽度：100%。我已经更新了 jsfiddle 链接。

【解决方案2】：

只需将 text-allign 属性更改为 .left 和 .right 的中心

【讨论】：