Question

我知道垂直居中是一个经常出现的主题，但我发现的所有解决方案并没有按照我的例子的说法运作。

我试图做的是将相同尺寸的相同框架框放在一起，使用可变尺寸的图像（未知但在已知范围内），图像下方的文字链接标题。我不能使用表格样式，因为盒子的数量也是可变的，我需要它们在浏览器中彼此相邻的时候缠绕到另一行。我得到的最接近的是transform：translateY，但它仍然没有考虑文本链接的大小，所以它低于中心，并且它在Chrome和Firefox中产生模糊的文本（尝试了几个解决方法如perspective（1px）或translate3d（0,0,0），没有一个适用于任何浏览器。）

任何其他适用于此具体示例的方法？

这是HTML（图像大小仅用于测试，在实际实现中它们将是未知的）：

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="boxes.css">
 </head>
 <body>
  <div class=main>
   <div class=box>
    <div class=image>
     <p><img src="image1.png" alt=" " width=200 height=150></p>
     <p><a href="">Caption</a></p>
    </div>
   </div>
   <div class=box>
    <div class=image>
     <p><img src="image2.png" alt=" " width=150 height=100></p>
     <p><a href="">Caption</a></p>
    </div>
   </div>
  </div>
 </body>
</html>

这是CSS，在任何花哨的集中尝试之前：

div.main
{
width:996px;
border:0px;
padding:0px;
letter-spacing:0px;
argin-left:auto;
margin-right:auto;
display:table;
}

div.box
{
border:1px solid grey;
width:220px;
height:220px;
text-align:center;
min-height:100%;
vertical-align:middle;
display:inline-block;
margin:5px;
}

div.box > div.image
{
margin-left:auto;
margin-right:auto;
text-align:center;
vertical-align:middle;
display:block;
}

Answer 1

您是否有理由在图片周围使用<p>标签？尝试免除这些，并使用<div>样式在字幕周围添加clear:both。像这样：

<html>
<head>
<link rel="stylesheet" type="text/css" href="boxes.css">
</head>
<body>
  <div class=main>
   <div class=box>
    <div class=image>
     <img src="image1.png" alt=" " width=200 height=150>
     <div class="caption"><p><a href="">Caption</a></p></div>
    </div>
   </div>
   <div class=box>
    <div class=image>
     <img src="image2.png" alt=" " width=150 height=100>
     <div class="caption"><p><a href="">Caption</a></p></div>
    </div>
   </div>
  </div>
</body>
</html>

就这样：

div.main
{
width:996px;
border:0px;
padding:0px;
letter-spacing:0px;
margin-left:auto;
margin-right:auto;
display:table;
}

div.box
{
border:1px solid grey;
width:220px;
height:220px;
text-align:center;
min-height:100%;
display:inline-block;
vertical-align:middle;
margin:5px;
}

div.box > div.image
{
margin-left:auto;
margin-right:auto;
text-align:center;
vertical-align:middle;
display:block;
position:relative;
transform:translateY(-50%);
top:50%;
}
div.caption
{
clear:both;
}

CSS再次垂直对齐（带框中标题的图像）

1 个答案: