如何在两个维度的图像顶部居中文本？答案

【问题标题】：How do I center text on top of an image in both dimensions?如何在两个维度的图像顶部居中文本？
【发布时间】：2011-09-02 04:26:48
【问题描述】：

感谢大家的及时反馈，这非常有帮助。仍然存在一个问题：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>

【问题讨论】：

display: box; 不是有效属性，我认为您的意思是 display:block;

标签： html css vertical-alignment centering rollover

【解决方案1】：

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

因此，他们需要某种形式的 hack，您的支持要求是什么？

我拥有的最佳 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 支持

在 HTML 中的 img 和 span 之间添加一个 <i></i> 元素，如下所示：

<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]-->

OR - 没有额外的 HTML 元素或正确的垂直居中

如果您不想为 IE6/7 添加额外的 HTML <i></i> 元素，您可以将第一个解决方案与顶部填充解决方案结合起来，它不会完全垂直居中文本，但应该提供优雅的下降 -返回 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]-->

更新

根据 cmets，要使其正常工作并在父表上保留边框间距，您将删除表 CSS

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

然后添加 border-spacing: 0; 到a

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

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

Working example 带边框

【讨论】：

谢谢！有什么方法可以让这个 CSS 在边框间距下正常工作？
是.. 删除所有 table {} CSS 或调整您的边框间距以适应并将border-spacing: 0; 添加 .imgcontainer a {} CSS - IE 工作正常没有任何调整。

【解决方案2】：

这是一个现场演示：

http://jsfiddle.net/CKRZg/23/

这是新的 CSS：

.

imgcontainer {
    overflow: hidden;
    float: left;
    position: relative;
}

.imgcontainer img {
    float: left;
    padding: 5px;
    background: #fff;
    width: 500px;
    height: 500px;
}

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

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

.imgcontainer a:hover .desc {
    display: block;
    text-align: center;   
    width:500px; 
    line-height:500px;   
    background: #111;
    filter: alpha(opacity=75);
    opacity: .75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 500px;
}

【讨论】：

由于您使用line-height:500px，这仅适用于单行文本。这可能无关紧要，但无论如何都应该提及。
如果这实际上是一个答案，请在您的答案中包含标记和 css，而不仅仅是指向 jsfiddle 的链接。
是的，他总是可以使用 margin-top 并将类设置为 2 行图像:)
有没有简单的方法来处理文本换行？
阅读上面的 cmets :)。在它周围设置一个西班牙语，删除行高并使用填充将西班牙语设置在中心。或者尝试使它成为一个应用了垂直对齐的表格单元格:)

【解决方案3】：

您也可以使用padding 来实现。这将处理包装的文本。

.imgcontainer {
    overflow: hidden;
    float: left;
    position: relative;
}

.imgcontainer img {
    float: left;
    padding: 5px;
    background: #fff;
    width: 500px;
    height: 500px;
}

.imgcontainer a .desc {
    display: none;
    font-size: 1.2em;
    padding: 50% 0;
}

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

.imgcontainer a:hover .desc {
    display: -webkit-box;
    display: -moz-box;
    display: block;
    -webkit-box-align: center;             
    text-align: center;   
    background: #111;
    filter: alpha(opacity=75);
    opacity: .75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 500px;
}

【讨论】：

【解决方案4】：

使用display:block，display:box 无效。这将修复水平居中。

垂直居中有点棘手，因为 html 并不关心页面的垂直布局，只关心水平。

见：What is vertical-align used for in CSS?

【讨论】：

display: box 是 CSS3 的东西。这是随机的 Google 结果：hacks.mozilla.org/2010/04/the-css-3-flexible-box-model
k，很酷的东西。但仍然：IE 不支持，并且在 moz/webkit 中是实验性的。如果你问我，这不是一个部署就绪的功能。

【解决方案5】：

这是另一种方式。但在 IE6 中不起作用。

CSS：

* { margin:0; padding:0 }
.desc { position:relative; display:inline-block }
.desc img { vertical-align:middle }
.desc span { position:absolute; left:0; width:100%; height:100%; line-height:100px; background:black; text-align:center; color:white; display:none }
.desc:hover span { display:inline-block }

HTML：

<a href="#" class="desc">
    <img src="http://www.uploadarchief.net/files/download/troll_face.jpg" width="100" height="100" alt="" />
    <span>Description</span>
</a>

【讨论】：