如何根據圖片對齊文字？

-1

我目前正在嘗試將文本與圖像內聯對齊。如何根據圖片對齊文字？

這裏是我到目前爲止已經試過：

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失去我想要的東西，儘管底部有文字，我正試圖將其排列在中心位置。

在此先感謝！

來源

2015-04-05 Sz. Erika

您可以用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>

來源

2015-04-05 15:16:54

你可以使用背景圖片

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>

來源

2015-04-05 15:14:42

如何根據圖片對齊文字？

回答

相關問題