如何在两个维度上将文字居中放置在图像上方？

编程问答 2022-04-25

问题描述

| 谢谢大家的及时反馈，它非常有帮助。仍然存在一个问题：
line-height
和
padding
似乎都无法居中显示足以环绕的文本和在表格单元中应用时恰好适合画面中间一行的文本。 奇怪的是，下面的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>
    

解决方法

您不必为幼稚而道歉。垂直居中是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)\";
}
工作示例：此处 并且：具有最佳的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]-->
或-没有额外的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]-->
更新资料 按照注释，要使它起作用并在父表上保留边框间距，您将删除表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
 具有边框间距的工作示例     ,这是一个现场演示： 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;
}
    ,您也可以使用填充。这将处理换行的文本。 
.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;
}
    ,使用
display:block
，
display:box
无效。可以解决水平居中的问题。 垂直居中有点棘手，因为html并不是要与页面的虚拟布局有关，而只是与水平有关。 请参阅：CSS中的vertical-align用于什么？     ,这是另一种方式。但是在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>
    
上将上方两个何在图像文字文字维度置在