Question

我正在创建一个非常简单的响应式图库，其中css的数量最少。我想出了以下

<div class="container">
  <ul class="thumbnail">
    <li>
      <div>
        <img class="fluid" src="" width="" height="" alt="">
      </div>
      <div class="thumb-caption">
        <p>name goes here</p>
        <p>subname goes here</p>
        <p>year</p>
        <img src="" width="20" height="15" alt="">
      </div>
    </li>
    ...
  </ul>
</div>

CSS：

.thumbnail {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -20px;
}

.thumbnail li {
  margin: 20px 0 0 20px;
}

.thumbnail img {
  display: block; /* remove bottom gap */
}

.thumb-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thumb-caption > * {
  margin-top: 10px;
}

...和结果

https://jsfiddle.net/51yrdk11/

我希望将所有内容集中在课程thumb-caption中。它可以是<p>或img标记。

出于某种原因，当<p>类中的thumb-caption之一很长时，它不能正确居中。

有人可以告诉我为什么并解决它吗？

修改

我知道通过使用text-align:center和<p>标记，它可以正确对齐。但为什么？为什么有些对齐而长对齐？我需要理解逻辑。

Answer 1

align-items用于对齐flex项。它不会对齐flex-items的内部内容。

您必须在text-align: center类

中使用.thumb-caption

Stack Snippet

/*----- reset -----*/

* {
  box-sizing: border-box;
}

p,
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* end - reset */

.container {
  max-width: 800px;
  margin: auto;
  background-color: pink;
}

.thumbnail {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -20px;
}

.thumbnail li {
  margin: 20px 0 0 20px;
}

.thumbnail img {
  display: block;
  /* remove bottom gap */
}

.thumb-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.thumb-caption>* {
  margin-top: 10px;
}


/* media queries */

.thumbnail li {
  flex-basis: calc((100% / 3) - 20px);
}


/* end- media queries */

.fluid {
  max-width: 100%;
  height: auto;
}

<div class="container">
  <ul class="thumbnail">
    <li>
      <div>
        <img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
      </div>
      <div class="thumb-caption">
        <p>
          name goes here
        </p>
        <p>
          subname goes here
        </p>
        <p>
          year
        </p>
        <img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
      </div>
    </li>
    <li>
      <div>
        <img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
      </div>
      <div class="thumb-caption">
        <p>
          name goes here
        </p>
        <p>
          subname is very very long, and when it is very long, for some reason, it does not center correctly, why?
        </p>
        <p>
          year
        </p>
        <img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
      </div>
    </li>
    <li>
      <div>
        <img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
      </div>
      <div class="thumb-caption">
        <p>
          name goes here
        </p>
        <p>
          subname goes here
        </p>
        <p>
          year
        </p>
        <img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
      </div>
    </li>
    <li>
      <div>
        <img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
      </div>
      <div class="thumb-caption">
        <p>
          name goes here
        </p>
        <p>
          subname goes here
        </p>
        <p>
          year
        </p>
        <img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
      </div>
    </li>
    <li>
      <div>
        <img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
      </div>
      <div class="thumb-caption">
        <p>
          name goes here
        </p>
        <p>
          subname goes here
        </p>
        <p>
          year
        </p>
        <img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
      </div>
    </li>
  </ul>
</div>

<强> Updated Fiddle

Answer 2

较小的文本居中且长的不居中的原因是因为p元素是居中的，而不是其内容。

align-items: center所做的是使p缩小到其内容，与其默认值stretch相反，这使得它填充其父级的宽度，因此当内容太宽时它不能使p居中，因为它需要全宽。

如您所知，定位text-align: center元素的p将解决此问题。

作为一个注释，为了理解这些逻辑，人们可以做的最简单的事情之一就是在元素上添加边框或背景颜色，这种颜色看似奇怪，在本例中是{{ 1}}，大部分时间都会看到发生了什么。

/*----- reset -----*/
* {
  box-sizing: border-box;
}

p,
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* end - reset */

.container {
  max-width: 800px;
  margin: auto;
  background-color: pink;
}

.thumbnail {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -20px;
}

.thumbnail li {
  margin: 20px 0 0 20px;
}

.thumbnail img {
  display: block; /* remove bottom gap */
}

.thumb-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* for this demo */
.thumb-caption p {
  border: 1px dashed black;
}

.thumb-caption > * {
  margin-top: 10px;
}

/* media queries */
.thumbnail li {
  flex-basis: calc((100% / 3) - 20px);
}
/* end- media queries */

.fluid {
  max-width: 100%;
  height: auto;
}

如何在很长的时间内对齐柔性项目

2 个答案: