Question

我基本上试图创建一个带有液体<h1>的2列div和另一个跨越<h1>的整个高度的div，但我希望垂直对齐是居中。我基本上试图将图像放在页面标题的左侧：

<div class="outer">
   <div><img src="pound.png" /></div>
   <h1>This is text that is really long. This is text that is really long.  This is text that is really long.  This is text that is really long.  This is text that is really long.</h1>
</div>

这是一个例子;我真的不想使用表格，因为我希望能够在某些情况下将图像浮动到右侧。我也不关心边界，我只是这样做来说明对齐。

------------------------------------------------------
        |  This is text that is really long. This is 
######  |  text that is really long. This is text that
######  |  is really long. This is text that is really
######  |  long. This is text that is really long. This 
        |  is text that is really long.
------------------------------------------------------

我的主要问题是让图像垂直占据整个空间，以便我可以使用边距垂直对齐：50％或自动或某些变化。我可以将图像垂直居中，然后文本环绕它，或者我可以让文本不包裹，但然后图像垂直对齐。

Answer 1

在线广泛涵盖了此主题：http://goo.gl/hmTsW

我发现这是对技术的一个很好的总结，选择适合你的技术。 http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 2

浏览器支持目前有点受限，但您可以尝试使用box-align css属性来垂直对齐图像和文本。更多here。

Answer 3

尝试使用行高。如果可能的话，它也会更容易用于差异

CSS垂直对齐图像/文本

3 个答案: