列中的垂直中心图像

我的HTML页面中有两列。列中的垂直中心图像

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div>

他们每个人都占据了页面

#left { 
    float: left; 
    width: 50%; 
} 

#right { 
    float: left; 
    width: 50%; 
}

我想中心在右栏中的图片的一半。我知道我可以通过做margin-left: auto; margin-right: auto;来使它水平居中。我怎样才能让它垂直居中？

来源

2013-03-16 Mika H.

我认为你只需要把高度100％，然后边距自动 – Martyn0627 2013-03-16 19:36:33

你厌倦了'垂直对齐：中间'在列的div？ – Blieque 2013-03-16 19:37:59

不是一个答案，但你应该像'#left，#right {/ * styles * /}'一样结合'＃left'和'＃right' CSS块。编程时不应该重复任何代码，CSS也是如此。 – 2013-03-16 19:38:43

我看到的第一个问题是没有指定高度为left和rightdiv s的高度;身高应该设置为100%或任何你喜欢的值。为了垂直居中图像，我们可以使用绝对定位。我们将设置图像的尺寸（这在任何情况下都是很好的做法），然后设置top:50%和left:50%属性。尽管如此，这会将图像推到盒子外面，所以我们添加了图像宽度和高度的一半的负边距。这将在每次时垂直和水平对齐div中的图像！

下面是更新后的CSS：

#left, #right { width: 50%; height:100%; float:left; position:relative; } #right img { position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; margin-top: -40%; /* Half the height */ margin-left: -40%; /* Half the width */ }

在此的jsfiddle看看：http://jsfiddle.net/bYF7F/2/。

来源

2013-03-16 19:37:40

谢谢，我明白你在做什么。但是，图像的大小将始终是“正确”div的80％。是否有可能摆脱这种假设，因为有些图像不适合以这种尺寸显示？ – 2013-03-16 20:03:52

是的。对不起，我修好了，所以图片在右侧。而且，你完全可以摆脱这个假设。您可以使用像素值代替（尽管如果您需要响应式设计，百分比是最佳选择）。 – 2013-03-16 20:05:32

是的，当然！我只是在实施它。 – 2013-03-16 20:26:04

-2

如果您使用TABLE而不是DIV，它将自动居中。

来源

2013-03-16 19:38:04 WilliamK

这不必要的麻烦，你不觉得吗？ – 2013-03-16 19:56:36

没有。事实上要简单得多。另外，当你知道如何使用它们时，你可以更好地控制表格。 – WilliamK 2013-03-16 20:03:29

实际上，这将是一个不正确使用“表”的例子。表格仅用于表格数据。所以很确定，你可以使用它，但它会在语义上不正确。此外，表格几乎不像'div'那样自由流动，这是现代网站没有使用表格进行布局的原因之一。 – 2013-03-16 20:08:14

我知道这个问题已被标记为已回答，但您确实提到图片上的高度和宽度并不理想。所以我想提出另一种解决方案。

地址：

display: -webkit-flex; 
display: flex;

向右DIV和：

margin: auto;

的形象。我认为这是你以后的样子。看到小提琴http://jsfiddle.net/Fqa7b/

来源

2013-03-17 13:51:44 Martyn0627

列中的垂直中心图像

回答

相关问题