如何使 <img /> <h1>...</h1> <img /> HTML + CSS 居中？答案

【问题标题】：How do I center <img /> <h1>...</h1> <img /> HTML + CSS?如何使 <img /> <h1>...</h1> <img /> HTML + CSS 居中？
【发布时间】：2012-09-30 09:25:01
【问题描述】：

这让我很沮丧...我正在尝试做一些看起来像这样的东西：

   Logo

img|h1|img

字幕周围的图像只是看起来像这样的水平线

--- 副标题---

这是 HTML：

<div>
     <a href="#">
     <img class="logo" src="#" alt="..."/></a>
 </div>
 <div class="subtitle">
     <img class="1" src="#" width="60" height="1" alt="..."/>
     <h1>subtitle text</h1>
     <img class="2" src="#" width="60" height="1" alt="..."/>
 </div>

我尝试将元素放在另一个 div 中并定义宽度：%;对于具有边距的 div:0 auto;但这样做的问题是，如果用户在浏览器中增加文本大小，则正确的图像会移动到下一行。

任何帮助都会很棒。谢谢！

【问题讨论】：

有很多方法可以做到这一点。查看float:left、display:table-cell、column-count 和/或display:inline-block（它们各有利弊，最佳解决方案取决于各种参数）。
您介意我编辑您的问题以摆脱所有这些管道，并用预块替换它们吗？
当然，抱歉，这是我第一次使用这个网站：-D

标签： html css position alignment center

【解决方案1】：

尝试将内联 img 标签放在块 h1 元素中，然后按如下方式设置 H1 标签的样式：

CSS：

h1{
 width: 100px; /* whatever width you prefer*/
 text-align: center;
}

HTML：

 <h1>
    <img class="1" src="#" width="60" height="1" alt="..."/>
    subtitle text
    <img class="2" src="#" width="60" height="1" alt="..."/>
 </h1>

示例：http://jsfiddle.net/sujvM/ 注意*：出于某种原因，您需要单击运行按钮才能在 jsfiddle 中加载图像。

【讨论】：

将 img 标签放在 h1 元素中就像一个魅力。谢谢！
没问题，很高兴能帮上忙。这是因为 H1 是块级元素，而 img 标签是内联元素。

【解决方案2】：

您可以使用display: inline 和white-space: nowrap 来完成此操作：

.subtitle {
    text-align: center;
    white-space: nowrap;
}
.subtitle h1 {
    display: inline;
}

【讨论】：