将行 div 内的 3 div 与文本居中对齐

Question

与 How to align 3 divs (left/center/right) inside another div? 类似，我试图在父 div 中对齐三个 div。更复杂的是每个 div 包含一个图像、文本和一个 link。我希望这些对齐 link 所以：

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

然而，我能得到的最接近的是：

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

文本和 links 镜像对齐图像。

这是我的 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%;
}

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

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

我感觉我的结构存在根本性的错误，但我不确定是什么。这方面很新。

有什么想法吗？

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

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

Answer 1

只需删除 col-4 class.

旁边的 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%;
}

希望对您有所帮助。

Answer 2

只需将 text-align 属性更改为 .left 和 .right 居中

将行 div 内的 3 div 与文本居中对齐

Align 3 divs within row div with text centered

html

css

alignment

text-alignment