我试图将2行文字放在图像旁边,就像这样
_________ | | Line one of text | image | | | Line two of text ---------
这是我迄今为止的代码
<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span></p>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
.banner img {
float: center;
margin: 5px;
}
.banner span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
.banner .ban2 span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
但目前它是这样做的：
_________ | | Line one of text | image | | | --------- Line two of text
我已经浏览了整个网络,但还没有弄清楚如何做到这一点,任何帮助将是非常欢迎的.
解决方法
没有这样的东西,如float：center;您可以选择左,右或无.
如果你漂浮：左;在图像上,它会做你以后的事情.
如果你想要它居中,那么你将不得不将图像和文本包装在一个容器中,修复容器的宽度并做边距：0 auto;在它上面,然后继续让你的图像浮动 – 除了它将被包装器约束.
