如何将文本和图像放在%width div中的一行上?
浮动自动变成块级元素。无法通过text-align: center
将它们居中。你要做的唯一方法是让它们像这样内联块:display: inline-block
。我加vertical-align: top;
为h
在顶部。这个工作的例子是:http://jsfiddle.net/skip405/JnbeJ/4/
击败我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
你的图片和文字不能浮动离开,并在同一时间集中...
他们可以因为他包含在一个包装div。 – 2012-04-25 20:31:17
你有一个div是100%的宽度(btw/divs是100%开始),并试图将div居中,也是100%的宽度。你可以在内部div上放一个宽度,或者使其成为inline-block
。
在你的情况下,你将使内嵌块的'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;),不需要在那里。
你其实也不需要保证金,我的不好。只需简单地.centered {display:inline-block;}就可以实现。 – 2012-04-25 21:10:32
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