如何将文本和图像放在％width div中的一行上？

我真的很苦恼，我不知道为什么。我想在1行上放置文本和图像，并在100％宽度div内居中放置。这里有一个的jsfiddle ..如何将文本和图像放在％width div中的一行上？

2012-04-25 Dustin

float left * immediately *使您无法使用文本对齐中心。浮动元素会使元素呈现在文档流之外 – 2012-04-25 20:23:31

@JonathanRomer no。请参阅下面的跳过答案 – 2012-04-25 20:25:15

这些陈述是不正确的。你仍然可以根据OP如何设置他的代码来使用float和text-align。看到我的答案。 – 2012-04-25 20:36:35

浮动自动变成块级元素。无法通过text-align: center将它们居中。你要做的唯一方法是让它们像这样内联块：display: inline-block。我加vertical-align: top;为h在顶部。这个工作的例子是：http://jsfiddle.net/skip405/JnbeJ/4/

来源

2012-04-25 20:24:04 skip405

击败我http://jsfiddle.net/JnbeJ/5/ – 2012-04-25 20:24:40

包装div允许他使用文本对齐中心内容。但包装div也需要一个宽度或被制成内联块。 – 2012-04-25 20:34:24

@Matt K，把'text-align：center;'放在哪里并不重要。它是继承的。正如你可以从我的jsfiddle中看到的那样，我中心'h1'和'img'而不是它们的包装器。 – skip405 2012-04-25 20:42:55

你的图片和文字不能浮动离开，并在同一时间集中...

来源

2012-04-25 20:23:39 Neil

他们可以因为他包含在一个包装div。 – 2012-04-25 20:31:17

你有一个div是100％的宽度（btw/divs是100％开始），并试图将div居中，也是100％的宽度。你可以在内部div上放一个宽度，或者使其成为inline-block。

Updated fiddle.

来源

2012-04-25 20:26:09

在你的情况下，你将使内嵌块的'div'将居中，而'h1'和'img'不会通过'text-align：center'在该div中居中。看到这个绿色背景的div居中，其内容不是。 http://jsfiddle.net/skip405/JnbeJ/8/ – skip405 2012-04-25 20:49:07

@ skip405，它不居中，因为你没有居中它...在我的例子中，h1有一个流体宽度，你给它一个特定的宽度，没有居中。不知道你想在这里争论什么。 – 2012-04-25 20:53:28

请给我看看我的CSS中的确切的行，“不居中”的内容和确切的路线，其中h1是给定的具体宽度。 – skip405 2012-04-26 08:39:19

您使用的是有类名的包装“居中”这样反而使这两个元素的（显示：内联块），只需添加这种风格你包装：

.centered {display: inline-block; margin: 0 auto;}

你的容器CSS中还有一个额外的（text-align：center;），不需要在那里。

来源

2012-04-25 21:02:06

你其实也不需要保证金，我的不好。只需简单地.centered {display：inline-block;}就可以实现。 – 2012-04-25 21:10:32

如何将文本和图像放在％width div中的一行上？

回答

相关问题