Question

我正在尝试修改HTML5 Boilerplate标题，使其中心图像的左侧像这样： header correct

正如你所见，我设法做到了，但这只是使用了样板和坏css的部分，打破了h5bp的实用性。我想现在正确使用h5bp并实现同样的目的。我只是不确定该怎么做。

我目前的尝试是这样的： header incorrect

图像不在单词之间，即使标记中的顺序如此：

<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; 
}

如果有人能解释为什么文字不是图像的任何一面，那将是非常感激的。

谢谢

编辑：

虽然下面的答案是有效的，但我实际上通过将＆lt; img＆gt;进入＆lt; h1＆gt;而不是将它们分开，如下：

<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-align或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;}

小提琴here

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

3 个答案: