我正在尝试修改 HTML5 Boilerplate 标头以使中心图像的两侧都有一个单词,如下所示:
正如你所看到的,我设法做到了,但这只是使用了破坏 h5bp 有用性的部分样板和糟糕的 css。我现在想正确使用 h5bp 并实现同样的目标。我只是不知道该怎么做。
我目前的尝试如下所示:
图像不在单词之间,即使标记中的顺序如下:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</div>
相关CSS:
.center { display: table; margin: 0 auto; }
#title
{
padding: 20px;
display: inline;
font-size: 4.5em;
border-top: 4px solid #5dc1c4;
border-bottom: 4px solid #5dc1c4;
}
如果有人能解释为什么文本不是图像的任何一侧,那将不胜感激。
谢谢
编辑:
虽然下面的答案是有效的,但我实际上通过将 < img > 放入 < h1 > 而不是将它们分开来解决了这个问题,如下所示:
<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>