css 正方形区域中的中心元素组

Question

（请在我的 post 底部查看我的工作解决方案）

我有一个固定大小的盒子，在里面，我想将一组由 img、h3、p 组成的元素居中。

如果盒子只包含 img，我可以很好地将其居中。但是当我添加文本标签时，居中中断。

这是工作案例的 html、css：

<div class=cell>
  <img src="paintings/Painting-40.small.jpg" onclick="clickCell('0')">
</div>

.cell {float:left; width:350px; height:350px; line-height:350px; display:block; z-index:0;}
.cell img {vertical-align:middle; border:3px solid #cecece;}

在上面，我使用 line-height 来让 vertical-align 起作用。据我了解，CSS 仅提供文本的垂直对齐，因此我将文本行设置为框的高度。

现在，对于损坏的外壳，您也可以在 https://jsfiddle.net/qhuqtspb/2/

查看

<div class=cell>
  <div class=caption>
    <img src="http://kostal.kotatko.com/paintings/Painting-40.small.jpg" onclick="clickCell('0')">
    <h3>title</h3>
    <p>id:Painting-40</p>
  </div>
</div>

.cell {float:left; width:350px; height:350px; line-height:350px; display:block; z-index:0; border:1px solid red}
.cell .caption {margin:auto; vertical-align:middle; border:1px solid green }
.cell .caption img {border:3px solid #cecece;}
.cell .caption h3 {line-height:10px; display:block}
.cell .caption p {line-height:10px; display:inline}

即使我添加了一个中间层来封装三个分组元素（绿色边框），它仍然为每个元素分配了很大的行高，导致它们溢出框（红色边框）。另请注意，水平居中已损坏。

我已经尝试了多种标记变体，但目前没有任何效果。

工作解决方案：

* {padding: 0px; margin: 0px}

.cell {width: 350px; height: 350px; border: 1px solid red;
       display: flex; justify-content:center; align-items:center;
}
.cell img {border: 3px solid #cecece;}
.cell .group {text-align:center;}
.cell h3 {display:inline}
.cell p {display:inline}

<div class=cell>
  <div class=group>
    <img src="http://kostal.kotatko.com/paintings/Painting-40.small.jpg" onclick="clickCell('0')">
    <div>
      <h3>title</h3>
      <p>id:Painting-40</p>
    </div>
  </div>
</div>

Answer 1

单元格使用 display:table，标题使用 display:table-单元格

* {padding:0px; margin:0px}

.cell {float:left; width:350px; height:350px;  display:table; z-index:0; border:1px solid red;text-align:center;}
.cell .caption {margin:auto; vertical-align:middle; border:1px solid green;display:table-cell; }
.cell .caption img {border:3px solid #cecece;}
.cell .caption h3 {line-height:10px; display:block}
.cell .caption p {line-height:10px; display:inline}

<div class=cell>
  <div class=caption>
    <img src="http://kostal.kotatko.com/paintings/Painting-40.small.jpg" onclick="clickCell('0')">
    <h3>title</h3>
    <p>id:Painting-40</p>
  </div>
</div>

Answer 2

试试这个 fiddle。

https://jsfiddle.net/qhuqtspb/4/

您可以使用 flexbox 使其居中。基本上在容器上使用这个 css。

.cell {
  display:flex;
  align-items: center;
  justify-content: center;
}

关于 flexbox 的更多信息，这里是完整的指南。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

另一种选择是使用 flex-box。这是一个非常有用的 CSS 模块，用于对齐、居中和显示元素。我已将 CSS 按照您想要的方式使用它。为了使其可读，我从 CSS 中删除了一些不影响代码段的元素。请确保在继续工作之前添加任何必要的内容。

* {
  padding: 0px;
  margin: 0px
}

.cell {
  width: 350px;
  height: 500px;
  border: 1px solid red;
  
  display: flex;
  justify-content:center;
  align-items:center;
}

.cell .caption {
  border: 1px solid green;
  text-align:center;
}

.cell .caption img {
  border: 3px solid #cecece;
}

<div class=cell>
  <div class=caption>
    <img src="http://kostal.kotatko.com/paintings/Painting-40.small.jpg" onclick="clickCell('0')">
    <h3>title</h3>
    <p>id:Painting-40</p>
  </div>
</div>

css 正方形区域中的中心元素组

css center group of elements in square area

css

center