在我的标题旁边放置一个图像

Question

我有一张照片和一张照片标题。我试图在图像旁边显示文字。这是我目前的代码

 <p class="title">
    <img src="images/football.png" />
    Sports Section
</p>

.title {
 float:left;
}

Answer 1

尝试从p标签中移除浮动，并将其放在图像上。

<p class="title">
   <img class="my_image" src="images/football.png" />
   Sports Section
</p>


.my_image {
   float:left;
}

Answer 2

如果您想在图片中添加文字，可以尝试：http://jsfiddle.net/jLFTD/

在您的HTML中：

<p class="title"></p>

你的CSS中的

：

.title {
background-image: url('http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg');
background-size: cover;
background-repeat: no-repeat;
display: table;
min-width: 100%;
height: 291px;
}

.title:before {
content: "Sports Section";
font-size: 2em;
text-align: center;
display: table-cell;
vertical-align: middle;
color: red;
}