html - 如何在两个维度上将文本置于图像顶部的中心？

Question

感谢大家的及时反馈，非常有帮助。一个问题仍然存在:line-height 和 padding 似乎都无法将足够长的 both 文本居中放置 和 当应用于表格单元格时，文本可以整齐地放在图片中间的一行中。

奇怪的是，下面由 SwDevMan81 提供的填充解决方案在应用于 div 而非表格单元格时可以完美地工作...

我为我的天真提前道歉；这是我第一次涉足 HTML 和 CSS。

表格的代码如下:

<table border="1">
    <tr>
        <td class="imgcontainer">
            <a href="#">
                <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
                <span class="desc">
                    Very long text that wraps around and is centered properly
                </span>
            </a>
        </td>
        <td class ="imgcontainer">
            <a href="#">
                <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
                <span class="desc">
                    misaligned text
                </span>
            </a>
        </td>
    </tr>
    <tr>
        <td class="imgcontainer">
            <a href="#">
                <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
                <span class="desc">
                    misaligned text
                </span>
            </a>
        </td>
        <td class ="imgcontainer">
            <a href="#">
                <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
                <span class="desc">
                    Very long text that wraps around and is centered properly
                </span>
            </a>
        </td>
    </tr>
</table>

<style type="text/css">
    .imgcontainer {
        overflow: hidden;
        text-align: center;
    }

    .imgcontainer img {
        float: left;
        background: #fff;
        width: 200px;
        height: 200px;
    }

    .imgcontainer a .desc {
        display: none;
        font-size: 1.0em;
    }

    .imgcontainer a:hover {
        cursor: pointer;
        text-decoration: none;
    }

    .imgcontainer a:hover .desc {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-align: center;
        -moz-box-align: center;
        box-align: center;
        background: #DDD;
        filter: alpha(opacity=75);
        opacity: .75;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
        position: absolute;
        width: 200px;
        height: 200px;
    }
</style>

Answer 1

你不必为天真道歉。 垂直居中 是 CSS 中最容易被误解的部分之一。不幸的是，虽然有一个简单的解决方案 - 使用 table display properties - 它们不受 IE7 及以下版本的支持..

所以他们需要某种形式的破解，您的支持要求是什么？

我拥有的最佳 IE 解决方案涉及对 HTML 和 CSS 的破解(额外的 HTML 元素对它们很有帮助)

下面是没有 IE6/7 支持的代码:

HTML 就是你上面的

CSS:

table {
  table-layout: fixed;
  width: 403px;
  border-collapse: collapse;
  border-spacing: 0;
}

.imgcontainer {
  text-align: center;
  padding: 0;
  vertical-align: middle;
  border: 1px solid #000;
}

.imgcontainer img {
  float: left;
  width: 200px;
  height: 200px;
  border: 0;
}   

.imgcontainer a {
  display: block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}  

.imgcontainer a:hover img {
  margin-right: -200px;
}

.imgcontainer a .desc {
  display: table-cell;
  vertical-align: middle;
  border-spacing: 0;
  border-collapse: collapse;
  width: 200px;
  height: 200px;
  padding: 10px;
  background: #cfc;
}

.imgcontainer a:hover .desc {
  background: #DDD;
  opacity: .75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}

工作示例:HERE

---

并且:具有最佳的 IE6/7 支持

添加一个 <i></i> img 之间的元素和 span在 HTML 中是这样的:

<td class ="imgcontainer">
    <a href="#">
        <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
            <i></i>
        <span class="desc">misaligned text</span>
    </a>
</td>

然后是条件 CSS :(添加到上面主要内容之后的工作表中)

<!--[if LTE IE 7]>
<style type="text/css" media="screen">
.imgcontainer i {
  display: inline-block;
  width: 200px;
  height: 200px;  
  line-height: 200px;
  background: #DDD;
  filter: alpha(opacity=75);    
  vertical-align: middle;
  margin-right: -200px;
}

.imgcontainer a .desc {
    display: none;
    width: 180px;
    height: auto; 
}

.imgcontainer a:hover .desc {
    display: inline-block;
    background: transparent;    
}

</style>
<![endif]-->

---

或 - 没有额外的 HTML 元素或适当的垂直居中

如果您不想添加额外的 HTML <i></i>对于 IE6/7 元素，您可以将第一个解决方案与顶部填充解决方案结合起来，这不会完美地使文本垂直居中，但应该为 IE6/7 提供一个优雅的回退。

在这种情况下，IE 条件 CSS 将如下所示:

<!--[if LTE IE 7]>
<style type="text/css" media="screen">
    .imgcontainer a .desc {
        display: none;
        padding: 40px 10px 10px 10px;
        width: 180px;
        height: 150px; /* if adding to top padding, adjust height accordingly */
    }

    .imgcontainer a:hover .desc {
        display: inline-block;
        filter: alpha(opacity=75);      
    }
</style>
<![endif]-->

---

更新

根据评论，要使其正常工作并保留父表的边框间距，您需要删除表 CSS

table {
/*
  table-layout: fixed;
  width: 403px;
  border-collapse: collapse;
  border-spacing: 0;
*/
}

然后ADD border-spacing: 0;到 a

.imgcontainer a {
  display: block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  border-spacing: 0;
}  

添加以上意味着span设置为 display: table-cell;不继承 border-spacing在父表上

Working example带边框间距