css - 如何在 div 中垂直和水平居中图像？

Question

.spotlight-area img {
    width: 100px; 
    height: 100px; 
    margin-top: 30%; 
    margin-left: 40%; 
}

spotlight-area将是一个具有随机宽度和高度的 div。我正在使用的图像是100px（100px调整大小）。我试图将它与 margin-top 和 margin-left 居中，但它看起来像是一个糟糕的解决方法。

你有什么建议？

附言。这是一个播放按钮，将出现在视频容器 div 的顶部。

score 1 · Accepted Answer

查看 Chris Coyier 关于 CSS-Tricks 的这篇文章。我认为这可能会有所帮助。几天前我遇到了同样的问题，他的回答对我有用。

基本上这个想法是，如果您的图像具有设定的宽度和高度。您可以将其从左侧和顶部 50% 绝对定位，然后执行等于宽度和高度一半的负边距以使其回到死点。如果图像没有设置尺寸，它们是垂直居中图像的其他方法。

score 1 · Accepted Answer

1

vertical-align: middle;
text-align: center;

它会帮助你...

点击这个链接

于 2013-02-08T11:32:38.913 回答

score 0 · Accepted Answer

我想这会奏效，试着告诉我......

 .spotlight-area img {
        width: 100px; 
        height: 100px; 
        text-align: center;
    }

score 0 · Accepted Answer

0

Mybe这将工作：

   .spotlight-area { text-align: center; }

于 2013-02-08T11:30:24.210 回答

4 回答 4