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

这接近我想要的，尽管底部有文字，我试图将它对齐在中心。

提前致谢！

Answer 1

您可以使用背景图片

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>

Answer 2

你可以用背景图片来做。对齐文本并使用行高。有很多答案可以解释不同的方法。您需要浏览并尝试更符合您需求的内容。

＆＃13;

    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;   
    }

＆＃13;

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

＆＃13;

如何将文本与图片对齐？

2 个答案: