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

Question

我正在尝试修改 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>

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/

Answer 2

尝试使用display:inline-block;而不是display:inline. 我面前没有这个项目，所以我不确定这是否可行。

但是，如果这样做，图像将位于错误的位置。您必须简单地使用vertical-alignor margin-top:-##px。

Answer 3

一种稍微不同的方法，使用跨度，并且只有一个 h1 标签：

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

我还更改了一些 CSS：

.center h1 {display: block; }
// Add vertical align to the image, rather than the h1
.center img {margin: 0 10px; vertical-align: middle;}

在这里摆弄 ​</p>