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：0 auto;但问题是，如果用户在浏览器中增加文本大小，则右图移动到下一行。

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

Answer 1

您可以使用display: inline和white-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中加载图像的运行按钮。

如何集中<img/> <h1> ... </h1> <img/> HTML + CSS？

2 个答案: