gpt4 book ai didi

CSS:垂直对齐 li item 中的文本,不起作用

转载 作者:技术小花猫 更新时间:2023-10-29 11:26:00 25 4
gpt4 key购买 nike

我为 li items 使用了 list-style-image 和单行文本。

enter image description here

但它看起来很糟糕,所以我想将文本垂直对齐到图像的中间。

我应该使用 vertical-align: middle ,对吧?但这对我不起作用。

<html>
<head>
<title> This is an demo </title>
<style>
body {
background-color: #464443;
color: white;
}
ul {
list-style-image: url('bg.png');
}

li {
vertical-align: middle;
}

</style>
</head>

<body>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</body>
</html>

最佳答案

一个令人满意的方法 (imo) 是不使用 list-style-image,而是使用 background 属性来设置“bullet”(注意我替换了我自己的占位符图像,因为我只是从 fiddle 复制/粘贴).您的填充和其他尺寸将根据“元素符号”图像的大小而有所不同。

这是 fiddle :http://jsfiddle.net/huBpa/1/

body {
background-color: #464443;
color: white;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

li {
background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
line-height: 32px;
vertical-align: middle;
padding-left: 40px;
}​

关于CSS:垂直对齐 li item 中的文本,不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10068769/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com