Html 如何在%width div内的一行上居中放置文本和图像？

我真的很挣扎，我不知道为什么。我想让文本和图像在一行上，在一个100%宽度的div中居中

---

您的图像和文本不能同时向左浮动和居中…

浮动的元素自动变为块级。无法通过

text align:center

将它们居中。唯一的方法是让它们像这样内联块：

display:inline块

。我添加了

垂直对齐：顶部使
h
位于顶部。工作示例如下：
您有一个100%宽度的div（顺便说一句，div一开始是100%），并尝试将一个100%宽度的div居中。您可以在内部div上设置一个宽度，或者将其设置为
内联块

您正在使用类名为“居中”的包装器，因此不必同时生成两个元素（display:inline block；），只需将以下内容添加到包装器样式中：

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

您的容器css中还有一个不需要的附加（text align:center；）css
 “向左浮动”会立即取消您使用文本对齐中心的资格。浮动元素会使元素呈现在文档外部flow@JonathanRomer否。请参阅下面的跳过答案。这些陈述不正确。您仍然可以根据OP设置代码的方式使用float和text align。请看我的答案。它们可以，因为他将它们包含在包装器div中。包装器div允许他使用文本对齐将内容居中。但是包装器div也需要一个宽度或内联块。@Matt K，将
text align:center。它是遗传的。正如您可以从我的JSFIDLE I中心
h1
和
img
看到的，而不是它们的包装器。@skip405，那么为什么要有包装器呢？在包装器上放置一个宽度并将其居中是一个更好的选择，因为以前版本的IE不支持
内联块
。看看您在IE5/6/7中的示例，您将看到。也不需要垂直对齐文本内容。@Matt K，对不起，但我不打算与你争论）阅读我的评论，比较我制作的两个小提琴，然后自己决定内容的中心位置和包装的中心位置。说实话，我从来没有这样做过包装器的居中，我只是让你演示了浮动元素即使在居中的div内也不会居中。@skip405，“浮动元素即使在居中的div内也不会居中”。在你的例子中，你将制作内联块的
div
将居中，而
h1
和
img
即使通过
text align:center
在该div内也不会居中。看到这把小提琴了吗？绿色背景的div居中，而其内容不居中@skip405，它没有居中，因为你没有居中。。。在我的例子中，h1有一个流体宽度，你给了它一个特定的宽度，但没有居中。不知道你想在这里争论什么。请告诉我css中“取消中心化”内容的确切行，以及h1指定特定宽度的确切行。@skip405，你给它的父级指定了特定宽度，从而增加了h1必须扩展到的宽度。你确定
h1
标记扩展了它的宽度吗？给它一个背景，看看自己的宽度是不是扩大了所有。好了，你实际上也不需要保证金，我的坏蛋。只要简单。居中的{display:inline block；}就可以了。