css – 如何在html5中将文本放置在图像的任一侧

我正在尝试修改HTML5 Boilerplate标题以使中心图像具有任意一侧的单词,如下所示：

你可以看到我设法做到了,但这只是使用了样板和坏css的一部分,打破了h5bp的实用性.我想现在正确使用h5bp并实现同样的目的.我只是不确定该怎么做.

我目前的尝试看起来像这样：

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

irst

相关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>中可能更容易.像这样的标签：

irst

演示：http://jsfiddle.net/jfriend00/CHv4k/

原文地址：https://www.jb51.cc/css/427320.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。