html - 如何将文本和图像居中在 %width div 内的一行上？

Question

我真的很挣扎，我不知道为什么。我想在 1 行上有文本和图像，并在 100% 宽度的 div 内居中。这是一个jsfiddle ..

http://jsfiddle.net/JnbeJ/

Answer 1

浮动元素自动变为块级。不可能通过text-align: center. 您要做的唯一方法是使它们像这样的内联块：display: inline-block. 我添加vertical-align: top;了h在顶部。工作示例在这里：http: //jsfiddle.net/skip405/JnbeJ/4/

Answer 2

您的图像和文字不能向左浮动并同时居中...

Answer 3

你有一个 100% 宽度的 div（btw/ div 开始时是 100%），并试图将一个 div 居中，它也是 100% 宽度。您可以在内部 div 上设置宽度，也可以将其设置为inline-block.

更新了小提琴。

Answer 4

您正在使用类名“居中”的包装器，因此不要同时制作两个元素（显示：内联块；），只需添加以下内容来设置包装器的样式：

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

您的容器 css 中还有一个额外的 (text-align: center;) 不需要存在。