无法将图像与文字对齐

问题描述：

#content img{ 
    border: 2px solid black; 
    vertical-align: middle; 
} 

<div id="content"> 
    <h1><b>Company News 1</b></h1> 
    <img src="http://www.placehold.it/120x120"> 
    <span style=""> 
     A lot of text... 
    </span> 
</div>

结果是这样的：

enter image description here

我在做什么错？

你想要的布局是什么？ – Alohci

看到这个链接有人已经回答这可能会帮助你http://*.com/questions/6282403/how-to-vertically-align-a-div-next-to-an-image – krishna

看到这也http：///www.htmlgoodies.com/tutorials/getting_started/article.php/3479311/So-You-Want-To-Align-Text-Huh.htm – krishna

答

#content img{ 
    border: 2px solid black; 
    float:left; 
    margin-right:5px; 
}

答

我假设你想让文字环绕图像？而不是尝试以下 -

#content img { 
border: 2px solid black; 
float: left; 
}

答

检查JS小提琴

http://jsfiddle.net/5vzBS/

#content img 
{ 
    border: 2px solid black; 
    vertical-align: middle; 
    float:left; 
}

答

像这样

DEMO

#content img { 
    border: 2px solid black; 
    vertical-align: middle; 
    float: left; 
    margin: 0 10px; 
}

答

使用float:left财产

#content img{ 
    border: 2px solid black; 
    vertical-align: middle; 
    width:120px; 
    height:120px; 
    float:left; 
}

小提琴：http://jsfiddle.net/kJHK7/1/

答

EXAMPLE

简单和容易。享受

#content img { 
    border: 2px solid black; 
    vertical-align: middle; 
    float:left; 
    margin:0 20px 10px 0; 
}

无法将图像与文字对齐

相关推荐