如何根据图片对齐文字？

Question

我目前正在尝试将文本与图像内联对齐。

这里是我到目前为止已经试过：

HTML：

<ul> 
    <li>Coffee</li> 
    <li>Coffee</li> 
    <li>Coffee</li> 
</ul> 

CSS：

li 
{ 
list-style-image:url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/1.png); 
margin-left:50px; 
} 

FIDDLE

这是C失去我想要的东西，尽管底部有文字，我正试图将其排列在中心位置。

在此先感谢！

Answer 1

您可以用backg做圆形图像。对齐文本并使用行高。对于解释不同的方法，有很多答案。您需要浏览并尝试更适合您需求的内容。

ul li { 
 
     background-image: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/1.png); 
 
     background-repeat: no-repeat; 
 
     line-height: 70px; 
 
     padding-left: 80px; 
 
    } 
 
    
 
    ul { 
 
     margin: 50px; 
 
     list-style: none; 
 
    }

<ul> 
 
    <li>Coffee</li> 
 
    <li>Coffee</li> 
 
    <li>Coffee</li> 
 
</ul>

Answer 2

你可以使用背景图片

li{ 
 
    width: 68px; 
 
    height: 68px; 
 
    margin-bottom: 20px; 
 
    line-height: 68px; 
 
    display: block; 
 
    background-position: top left; 
 
    background-size: 68px 68px; 
 
    background: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/1.png); 
 
    text-indent: 86px; 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Coffee</li> 
 
    <li>Coffee</li> 
 
</ul>

，或者使用伪元素

li { 
 
    position: relative; 
 
    height: 68px; 
 
    display: block; 
 
    margin: 0 0 20px 40px; 
 
    line-height: 68px; 
 
} 
 
li:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -70px; 
 
    top: 0; 
 
    width: 68px; 
 
    height: 68px; 
 
    display: block; 
 
    background-position: top left; 
 
    background-size: cover; 
 
    background: url(http://evenimente.academiasuccesului.ro/wp-content/themes/responsive/images/1.png); 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Coffee</li> 
 
    <li>Coffee</li> 
 
</ul>