1

我一直在尝试做以下事情。我有一个<div>元素跨越其父 div 的整个宽度。在这里面我想放置 A. 一些文本和 B. 一个图像。

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

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

其他需求：

  1. <img>文本和元素之间必须有 12px 的空间。

  2. 重要提示：来自 A. 的文本和来自 B. 的图像都必须作为一个组居中。

  3. 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; }
4

5 回答 5

2

Is this what you are trying to achieve? http://dabblet.com/gist/3130292

于 2012-07-17T15:21:51.810 回答
1

This should work:

<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;
}

Then maybe use the vertical centering tip on the link provided above by @biziclop

于 2012-07-17T15:21:13.743 回答
1

Is this about right?

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

For aligning text, check this out.

And for placing elements next to each other, this.

于 2012-07-17T15:21:38.067 回答
1

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

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

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

于 2012-07-17T15:27:55.210 回答
1

最直观的方法是使用 '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>
于 2012-07-17T15:29:26.367 回答