html - 如何在 html5 中将文本定位到图像的任一侧

Question

我正在尝试修改 HTML5 Boilerplate header ，让中央图像的两边都有一个单词，如下所示:

如您所见，我设法做到了，但这只是使用了破坏 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; 
}

如果有人能解释为什么文本不在图像的任何一侧，我们将不胜感激。

谢谢

编辑:

虽然下面的答案是有效的，但我实际上通过将 放入

而不是将它们分开来解决了这个问题，就像这样:

<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>

Answer 1

使用您的 HTML 和这个 CSS，三个元素将一起显示在一行中:

.center h1 {display: inline;}​

工作演示:http://jsfiddle.net/jfriend00/yK7Qy/

仅供引用，我注意到您使用的是相同的 id="title"在多个地方。这对您不起作用，因为给定的 id 只能出现在页面中的一个对象上。您可能想将其更改为 class="title" .

---

将所有文本和图像放在一个中可能更容易 <h1>像这样的标签:

<div id="header-container">
    <header class="wrapper clearfix">
        <div class="center">
            <h1>
                <span class="title">First</span>
                <img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
                <span class="title">Second</span>
            </h1>
        </div>
    </header>
</div>​

此处演示:http://jsfiddle.net/jfriend00/CHv4k/