如何将图像和文本放在同一个 div 中而不影响对齐

Question

HTML

<div id="heading">Red Tailed Hawk</div>
<div id="panelpic1"></div>

CSS

#panelpic1{
    content: url(file:///C:/Users/Mohit/Desktop/images.jpg);
    float: left;
    width: 250px;
    height: 150px;
    vertical-align: middle;  
}
#heading{
    vertical-align: middle;
    font-size: 48px;
}

我想对齐标题和左边的图片。

当我将标题和图像放在同一个 div 中时，它失去了对齐。如何解决？

Answer 1

像这样将面板图片 div 放在标题 div 中。

<div id="heading" ><div id="panelpic1"></div>Red Tailed Hawk</div>

如何将图像和文本放在同一个 div 中而不影响对齐

How to put both image and text in the same div without messing with alignment

html

css

image

html-heading