我正在尝试修改HTML5 Boilerplate标题以使中心图像具有任意一侧的单词,如下所示：
你可以看到我设法做到了,但这只是使用了样板和坏css的一部分,打破了h5bp的实用性.我想现在正确使用h5bp并实现同样的目的.我只是不确定该怎么做.
我目前的尝试看起来像这样：
图像不在单词之间,即使标记中的顺序如下：
相关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>而不是将它们分开,如下所示：
最佳答案
使用您的HTML和这个CSS,这三个项目将一起显示在一行：
.center h1 {display: inline;}
工作演示：http://jsfiddle.net/jfriend00/yK7Qy/
仅供参考,我注意到你在多个地方使用相同的id =“title”.这对你不起作用,因为给定的id只能出现在页面中的一个对象上.您可能希望将其更改为class =“title”.
将所有文本和图像放在一个< h1>中可能更容易.像这样的标签：
