Question

我正在使用960个网格。图像应位于左侧，文本应显示在图像的右侧。顶部的文本位于h1标记中，其下方的文本较小。

文本应与图像水平对齐。但是，无法弄清楚如何实现这一目标。

感谢任何帮助。

＆＃13;

li {
	list-style:none;}

.about .grid_10 ul >li img{
	float: left;
	top: 50%;
	transform: translateY(-50%);
width: 50px;
	height:50px;}

.about .grid_10 ul >li h1{
	float: left;
	font-size: 36px;
	font-family: 'OpenSans';
	font-weight: 800;
	line-height: 1.1em;
	margin-left: 20px;
	top: 50%;
	transform: translateY(-50%);}
	
.about .grid_10 ul >li h1 span{
	float: left;
	font-size: 12px;
	font-family: 'OpenSans';
	margin-top:0;}

＆＃13;

 <div class="grid_10">
 <ul>
    <li>
        <img src="http://placehold.it/150x150" alt="My_Logo"/>
    </li>
    <li> 
        <h1>aaaaa aaaaaaa
            <br>
            <span>
                aaaaa aaaaaa  aaaaaaa aaaaaaaa
            </span>
        </h1>
    </li>                    
</ul>
</div>

＆＃13;

Answer 1

我更改了你的html布局并添加了正确的css

   
.grid_10  img {
    display: inline-block;
    float: left;
}

.grid_10  .text-container{
    display: inline-block;
    height: 150px;
    line-height: 150px;
    float: left;
    margin-left: 10px;
}

<div class="grid_10">
    <h1>aaaaa aaaaaaa</h1>
    <img src="http://placehold.it/150x150" alt="My_Logo"/>
    <span class="text-container">
        aaaaa aaaaaa  aaaaaaa aaaaaaaa
    </span>
</div>

Answer 2

将display: flex; flex-direction:row;个属性添加到ul标记。这使得ul内的元素显示在一行中。您可以使用align-items代码上的ul属性调整水平对齐方式。

另外，我会在<span>标记之外移动<h1>标记，以获得更好的样式。

Answer 3

您只需在CSS中的float: left;项目中添加<li>即可使文字显示在图片的右侧。

如何在<li>标签中排列图像，h1标签和跨度？

3 个答案: