Question

（请参阅我帖子底部的工作解决方案）

我有一个固定大小的盒子，在里面，我想把一组由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

试试这个小提琴。

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 2

另一个选择是使用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>

Answer 3

使用display：table表示单元格和display：table-cell表示标题

* {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>

css中心区域中的元素组

3 个答案: