html - 我如何居中

Question

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

   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 auto; 但问题在于，如果用户在浏览器中增加其文本大小，则正确的图像会移动到下一行。

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

Answer 1

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

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

Answer 2

尝试将内联 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 中加载图像。