简单的 CSS 居中（在 div 中居中文本 + 高图）答案

【问题标题】：Simple CSS centering (centering text + tall image inside a div)简单的 CSS 居中（在 div 中居中文本 + 高图）
【发布时间】：2012-07-17 15:10:14
【问题描述】：

我一直在尝试执行以下操作。我有一个<div> 元素它跨越了其父 div 的整个宽度。这里面我想放置 A. 一些文字和 B. 一张图片。

A.一些文本（松散的文本或包含在 <p>、<h2> 中的文本，或<span>，或<div> 元素），在左侧。

B.通过 <img> 元素定义的图像，其高度和宽度是已知的。

其他要求：

文本和<img>元素之间必须有12px的间距。
重要提示：来自 A. 的文本和来自 B. 的图像都必须是以组为中心。
来自 A. 的文本必须在其封闭空间中垂直居中。

我怎样才能达到这个效果？我尝试了不同的东西，但不能设法将图像放置在文本的右侧并且无法设法让文字 A. 垂直居中。

有人知道如何解决这个简单的问题吗？

谢谢大家的回答，似乎 CSS 让简单的事情变得如此困难，无论如何：

  div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
  div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
  div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }

【问题讨论】：

您能否为我们绘制一张图表或附上您正在尝试完成的工作的图片，也可以告诉我们您已经尝试过什么。
垂直居中：jakpsatweb.cz/css/css-vertical-center-solution.html

标签： html css xhtml css-float

【解决方案1】：

这是您想要实现的目标吗？ http://dabblet.com/gist/3130292

【讨论】：

这不太好。看看当浏览器窗口缩小时会发生什么。
您在小窗口上寻找什么行为？
同样的问题：它在调整大小时应该如何表现？
我更新了演示，让它在小屏幕上表现更好。
好吧，这样好多了，至少文字和图片在同一行。

【解决方案2】：

这样说对吗？

http://jsfiddle.net/89twb/2/

对于对齐文本，check this out。

对于将元素彼此相邻放置，this。

【讨论】：

【解决方案3】：

这应该可行：

<div class="my-outer-container">
 <div class="my-inner-container">
  <div class="my-text">Here is my text, it is lovely text.</div>
  <img src="my-image.jpg" alt="" class="my-image" />
 </div>
</div>

.my-outer-container {
 width:auto;
 text-align:center;
}

.my-inner-container {
 width:XXXpx; /* enter whatever the width you want here is */
 margin:0 auto;
 overflow:auto;
}

.my-text {
 width:XXXpx; /* enter whatever the width you want here is */
 float:left;
 margin-right:12px;
}

.my-image {
 width:XXXpx; /* enter whatever the width you want here is */
 height:XXXpx; /* enter whatever the height you want here is */
 float:left;
}

然后可以使用@biziclop 上面提供的链接上的垂直居中提示

【讨论】：

记得将容器向左浮动 (;
@Oliver - 除非我错过了技巧，否则不确定你会浮动容器吗？我已经在浮动文本 div 和图像了。

【解决方案4】：

最直观的方法是使用 'vertical-align:middle;'但它往往不是你想要的工作方式。

我做了一些研究，从这里找到了这段代码。 http://phrogz.net/css/vertical-align/index.html

希望这会有所帮助！

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>

<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

【讨论】：

【解决方案5】：

为了使 div 居中，它必须具有固定的宽度。如果它跨越其父 div 的宽度，则只能将其居中。所以在我看来最好的解决方案是将你的文本放在一个固定宽度的左浮动 div 中，并对你的图像做同样的事情，然后将它们都放在一个固定宽度的保持器 div 中，它以边距：自动；

这是一个例子：http://dabblet.com/gist/3130148

编辑-我通过将文本放在表格中垂直居中。表格是跨浏览器垂直居中的唯一可靠方式。

【讨论】：