html - 如何居中<img/> <h1>…</h1> <img/> HTML + CSS？

这让我感到沮丧...我正在尝试制作看起来像这样的东西：

   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，margin：0自动；但是这样做的问题是，如果用户在浏览器中增加其文本大小，则正确的图像将移至下一行。

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

最佳答案

尝试将内联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中。