如何跨浏览器在<li>元素中垂直居中自定义图像？
要在 <li> 元素中垂直居中自定义图像，可以使用以下方法：
- 使用 Flexbox 布局：
将 <li> 元素设置为 Flexbox 容器，并使用 align-items 属性将图像垂直居中。
li {
display: flex;
align-items: center;
height: 100px; /* 根据需要设置高度 */
}- 使用 Grid 布局：
将 <li> 元素设置为 Grid 容器，并使用 align-items 属性将图像垂直居中。
li {
display: grid;
align-items: center;
height: 100px; /* 根据需要设置高度 */
}- 使用绝对定位：
将图像设置为绝对定位，并使用 top 和 transform 属性将其垂直居中。
li {
position: relative;
height: 100px; /* 根据需要设置高度 */
}
li img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}这些方法都可以实现在 <li> 元素中垂直居中自定义图像的效果。您可以根据自己的需求和项目要求选择合适的方法。
相关·内容
我工作的网站的设计呼吁在列表上的自定义图像，而不是一个项目符号。使用图像很好，但我一直难以确保它在所有浏览器中都位于列表项文本的中心。有没有人知道这方面的标准解决方案？
浏览 0提问于2008-09-15得票数 4
回答已采纳
因此，如下所示，我有两个元素:我的名字和一个无序列表。我希望这是清楚的！基本上，我希望这两个比特在页面上左右并垂直和水平居中。通过将两个元素向左浮动，然后调整
浏览 2提问于2014-01-03得票数 0
5回答
我需要使用CSS在他们的容器<li>块中垂直居中一些图像，但我不确定如何去做。我可以求助于使用javascript来计算图像的高度，然后做一些数学运算，使用页边距将图像垂直居中，但这似乎既笨拙又愚蠢。有没有什么好的基于CSS的解决方案可以在不使用固定边距的情况下完成垂直对齐(图像高度是可变的)？
贴在容器li元素顶部
浏览 1提问于2012-10-04得票数 2
回答已采纳
5回答
水平居中浮动框
、、、
ETC问题是，对于给定的宽度，它在每行上显示例如4个框，但它们都是左对齐的，并且右侧有一些空白，我如何才能水平居中呢？提前谢谢你，
浏览 0提问于2009-12-05得票数 3
回答已采纳
1回答
如何在此列表中垂直和水平(跨浏览器)居中我的Glyphicons？ <ul class="list-inline center-block">
<liclass="social-icon img-circle
浏览 1提问于2015-08-07得票数 0
5回答
我试图垂直对齐列表元素中的图像和一些文本，但没有成功。例如： <li><img src="somepath" /> sometext<li><img src="somepath2" /> sometext2<
浏览 0提问于2011-02-17得票数 31
回答已采纳
3回答
我有一个头，里面有两个元素。第一个图像是公司徽标，宽度设置为25%。另一个是导航栏，它的元素设置为内联，因此它是水平的。我希望导航栏垂直居中，但无论如何我都想不出来。我已经将我所知道的所有内容都设置为一个可以使用垂直对齐的元素，并将所有内容放在显示、内联或表格单元格中以应用它。毫无办法。请记住，我不只是给它一个静态的百分比填充或页边距顶部的原因是因为随着页面变宽，图像高度随着宽度的增加而扩展，所以当您水平扩展
浏览 0提问于2013-03-13得票数 10
回答已采纳
我有红色的列表项，我希望它们的高度与列表元素中的最大高度相同，现在是crains图像。现在，代码看起来像这样。我还想让它们居中，这样它们都是垂直对齐的。<ul class="press_list"></ul>你可以看到所有的红色方框在高度上都不匹配，图像</e
浏览 1提问于2014-08-21得票数 0
为什么在li中放置图像时，文本没有中心对齐？如果我删除img，文本就会居中。我正努力达到两个位置的中心位置。<!list-style-type: none; padding: 0; background-color: #333; background-color: #111;</style><body>
<
浏览 0提问于2019-02-08得票数 1
回答已采纳
5回答
我有个问题：<html>HEADLINE<li>First Item</li></body>问题是数字(1.)是在左边，当我希望它在标题下对齐的时候。
浏览 6提问于2013-10-14得票数 33
回答已采纳
2回答
如何在此上下文中垂直居中glyphicon (和badge)元素： <li class="list-group-item"> </li>
浏览 3提问于2013-11-21得票数 8
如何垂直对齐以下列表项中的文本：
ul li { border: 1px solid red;height: 100px; }
<li>A bear</li>
<li>A panda who eats bamboo<&#
浏览 0提问于2011-12-03得票数 11
我正在处理CSS中的覆盖，并遇到了跨浏览器问题。覆盖高度应为视口的80%，并垂直居中。(元素高度80%，顶部边缘-40%，绝对位置50% )。下面的小提琴在Chrome中工作，但在Firefox中不起作用。问题似乎是利润率最高的百分比。确保调整浏览器的大小以查看全部效果。谢谢你的帮助！
浏览 4提问于2012-06-27得票数 1
回答已采纳
下面是它现在的样子：
有没有办法让我在有内容的区域居中，并放置一个重复的背景图像，这样网站看起来就不会那么空了？
浏览 0提问于2009-09-01得票数 1
回答已采纳
使用CSS垂直居中是一个挑战。
但我希望所有框的高度相同，并且文本在每个框中垂直居中。我可以通过为A元素添加一个height样式来设置框的高度。结果如下所示：...which很接近我想要的效果，但是垂直居中并没有发生。我可以将文本的line-height设置为，以实现垂直居中。我甚至可以为不同的A元素选择不同的lin
浏览 2提问于2011-09-30得票数 20
回答已采纳
当父元素的高度改变时，如何保持绝对定位的元素(垂直居中，顶部: 0；底部: 0；边距:自动；)在其位置？
元素是一个img，它完美地居中于垂直制表符的中心。当用户单击垂直选项卡时，它会展开以显示更多信息，这会使完美居中的图像在展开的选项卡中垂直居中。
浏览 1提问于2018-05-25得票数 3
1回答
我在一个jquery jcarousel控件中展示了一些图像。<div align="center">
<ul id="mycarousel" class=&qu
浏览 1提问于2012-11-13得票数 1
我需要在div中对消息进行居中，就像父div有100%的宽度，并且水平地对消息进行居中是没有问题的。此外，如您所见，图标也是垂直居中的，但我不能垂直地将文本居中。到目前为止，我应用到该div的唯一css是 height: 100% ;}
对于为什么消息div在.container中向下移动的任何建议。这是正确的跨浏览器</
浏览 8提问于2013-09-20得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
