Question

我一直在尝试做以下事情。我有一个<div>元素它跨越其父div的整个宽度。在里面我想把A.一些文字和B.一张图片放在一起。

一个。一些文字（包含在<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; }

Answer 1

这是你想要达到的目标吗？ http://dabblet.com/gist/3130292

Answer 2

这应该有效：

<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

上面提供的链接上的垂直居中提示

Answer 3

这是对的吗？

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

用于对齐文字check this out。

将元素放在一起，this。

Answer 4

为了使div居中，它必须具有固定的宽度。如果它跨越其父div的宽度，则只能将其中的内容居中。因此，对我而言，最好的解决方案是将文本放置在固定宽度的左浮动div中，并对图像执行相同操作，然后将它们放在固定宽度的持有器div中，该div位于余量：汽车;

以下是一个示例：http://dabblet.com/gist/3130148

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

Answer 5

最直观的方法是使用'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>

简单的CSS居中（居中文本+ div内的高图像）

5 个答案: