Fatal编程技术网
  • javascript/
  • Javascript facebook照片/图像垂直对齐？

Javascript facebook照片/图像垂直对齐？

javascript html css facebook

Javascript facebook照片/图像垂直对齐？,javascript,html,css,facebook,vertical-alignment,Javascript,Html,Css,Facebook,Vertical Alignment,facebook如何垂直对齐其照片？我检查了他们的img标签和它的父母。父级不使用填充，img不使用边距。有垂直对齐，但我认为它不适用于这种情况（请参阅）。我通常使用页边距（有时使用javascript）垂直对齐，所以我对facebook如何在没有填充或页边距的情况下进行对齐感兴趣。有人知道他们是怎么做到的吗？在facebook的网站上做了一些研究后，我找到了答案，下面是代码 <!DOCTYPE html> <html> <head> <style

facebook如何垂直对齐其照片？我检查了他们的img标签和它的父母。父级不使用填充，img不使用边距。有垂直对齐，但我认为它不适用于这种情况（请参阅）。我通常使用页边距（有时使用javascript）垂直对齐，所以我对facebook如何在没有填充或页边距的情况下进行对齐感兴趣。有人知道他们是怎么做到的吗？

在facebook的网站上做了一些研究后，我找到了答案，下面是代码

<!DOCTYPE html>
 <html>
 <head>
<style type="text/css">
        .img_contain {

            height: 700px;
            text-align: center;
            line-height: 700px;
            border: #333333 1px solid;
        }
        .img_contain img {
            display: inline-block;
            vertical-align: middle;
        }

    </style>
</head>
<body>
    <div class="img_contain">
        <img src="images/image.jpg" />
    </div>
</body>
    </html>


Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.


.img_包含{
高度：700px；
文本对齐：居中；
线高：700px；
边框：#333333 1px实心；
}
.img\u包含img{
显示：内联块；
垂直对齐：中间对齐；
}
我唯一缺少的是在文档顶部添加。现在它可以工作了。
还有一件事，父对象的高度和线条高度应该相等，并且应该大于它包含的图像的高度，使用display:table cell测试代码

  • *指*
  • 测试页面位于
    • 
另一个提要上的堆栈溢出
    我不理解，你的图像不是垂直的在包装器的中间。而且，我不想使用表格或表格单元格，垂直对齐在表格中是有效的，但是我更喜欢div。@德里克-如果包含图像的div更高，那么图像将垂直对齐在中间，否则它将在容器的最大高度为100%，最小高度为100%的div.：-）它是经过测试的。我在一个测试页面中编辑了我使用的代码，请记住！需要DOCTYPE。您的演示可以运行，但我不确定您的逻辑是否正确。img垂直对齐的原因是div有display:table单元格，而不是因为它比包含的图像大。它之所以有效，是因为“垂直对齐”与表格、表格单元格和“显示”：表格单元格将div变成了表格单元格。谢谢您的回答。这种方法的问题是，如果您将div width和height设置为100%，则div的宽度和高度将设置为宽度和高度组合的内容。我不喜欢在使用表格单元格时失去这一功能。我在问题中有一个链接解释了原因。简言之，垂直对齐仅在表中有效。第二，我基本上说了你在我的问题中所做的一切。第三，你的“答案”无助于解决问题，事实上，你在“答案”中提出了另一个问题。从你的个人资料来看，你是这个网站的新手，但以后请不要用问题来回答这个问题，你只会被否决。最后，请你删除这个“答案”，因为它实际上不是一个答案，如果你希望你的问题得到回答，请发表你自己的问题。事实上，我有同样的问题，所以我认为最好在这里提问。因为我是这个网站的新手，我不知道它会有答案。无论如何，我有同样的问题，希望得到一些答案。我不是来这里投票的。@Derek我已经编辑了答案，你之前的评论让我为你和我的问题找到了答案。 
    <!DOCTYPE html>
<html>
<head>

<title>StackOverflow on Another Feed</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" />
</div>
</body>
</html>