Question

我正在干涉CSS中的垂直对齐，使用flexbox模型，而且我正在努力适应的布局：

Layout needed

黄色图像的最大高度或最大宽度不同。

我已经做的是：

＆＃13;

.flex {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

img {
    max-width: 100px;
}

.small {
    max-width: 50px; /* for example, this could be 30 or 40 */
}

＆＃13;

<html>
<body>
  <div class="flex">
    <div class="child">
      <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
      <p> Text </p>
      <p> Text </p>
    </div>
    <div class="child">
      <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="small" />
      <p> Text </p>
    </div>
    <div class="child">
      <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
      <p> Text </p>
      <p> Text </p>
    </div>
  </div>
</body>
</html>

＆＃13;

此代码的主要问题是：

图片不是垂直居中的（Google的中心位置略低于其他两个）
将标题垂直居中会很酷，但基线模型就足够了。

是否可以使用flexbox执行此操作？如果没有，这样做的好方法是什么？

Answer 1

.flex {
  display: flex;
  justify-content: space-around;
  height: 200px; /* for demo */
}

.child {
  display: flex;
  flex-direction: column;
  text-align: center;
}

img {
  margin: auto 0; /* explanation: http://stackoverflow.com/a/33856609/3597276 */
  max-width: 100px;
}

.small {
  max-width: 50px;
}

p {
  margin: 0;
}

<div class="flex">
  <div class="child">
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
    <p> Text </p>
    <p> Text </p>
  </div>
  <div class="child">
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="small" />
    <p> Text </p>
  </div>
  <div class="child">
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
    <p> Text </p>
    <p> Text </p>
  </div>
</div>

jsFiddle

Answer 2

您可以使用HTML <table>或CSS表执行此操作，两者都需要进行一些标记更改。

.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  outline: 1px solid pink;
}

img {
  max-width: 100%;
}

<div class="table">
  <div class="tr">
    <div class="td">
      <img src="//dummyimage.com/200x100">
    </div>
    <div class="td">
      <img src="//dummyimage.com/200x50">
    </div>
    <div class="td">
      <img src="//dummyimage.com/200x100">
    </div>
  </div>
  <div class="tr">
    <div class="td">
      <p>Text</p>
      <p>Text</p>
    </div>
    <div class="td">
      <p>Text</p>
    </div>
    <div class="td">
      <p>Text</p>
      <p>Text</p>
    </div>
  </div>
</div>

Answer 3

您可以使用figure并使用figcaption更新您的结构，而.flex, figure { display: flex; text-align: center; } figure { margin: 5px;/*optionnal*/ flex-flow: column; flex: 1; justify-content: space-around; align-items: center; background: lightgray; } p { margin: 5px; } img, figcaption { max-width: 100%; } .small { width: 50%; }符合此处的内容：

＆＃13;

<div class="flex">
  <figure>
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
    <figcaption>
      <p> Text </p>
      <p> Text </p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="small" />
    <figcaption>
      <p> Text </p>
    </figcaption>
  </figure>
  <figure>
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
    <figcaption>
      <p> Text </p>
      <p> Text </p>
    </figcaption>
  </figure>
</div>

＆＃13;

min-height

＆＃13;

您可以将.flex添加到figure或padding，也可以添加flex。

这个答案是Michael_B和Pangloss答案之间的混合（HTML +新display:grid;结构）

编辑：

img { max-width: 100px; } .small { max-width: 50px; /* for example, this could be 30 or 40 */ } .flex, figure{ display:grid; grid-template-columns: 1fr 1fr 1fr;/* 3 cols */ } figure { grid-template-columns: 1fr ;/* reset to 1 col */ grid-template-rows: 50% 50%; /* 2 rows of same height */ } img, figcaption { align-self:center; justify-self:center; }将在不久的将来为这类工作做好准备：

＆＃13;

<div class="flex">
  <figure>
      <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
    <figcaption>
      <p> Text </p>
      <p> Text </p>
    </figcaption>
  </figure>
  <figure>
      <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="small" />
    <figcaption>
      <p> Text </p>
    </figcaption>
  </figure>
  <figure>
      <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
    <figcaption>
      <p> Text </p>
      <p> Text </p>
    </figcaption>
  </figure>
</div>

＆＃13;

foreach (var item in Model.Files)
{
   <input type="hidden" name="files" value="@item" />
}

＆＃13;

请参阅https://css-tricks.com/snippets/css/complete-guide-grid/

注意，

您需要标记：chrome或firefox上的实验性CSS，以便在此答案的时间使用网格CSS系统。

垂直居中的图像具有不同的最大宽度

3 个答案:

jsFiddle

编辑：

注意，