ul中只有一个li,li里面有张图片.图片的长宽不固定,如何让li在ul里垂直水平居中
<ul><li><imgsrc="1.jpg"height="120"width="100"></img></li></ul>height="120"width="100...
<ul ><li><img src="1.jpg" height="120" width="100"></img></li>
</ul>
height="120" width="100"这个是动态的。
不想拉伸图片。宽高不固定的 展开
</ul>
height="120" width="100"这个是动态的。
不想拉伸图片。宽高不固定的 展开
5个回答
展开全部
margin:0 auto 实现水平居中。关键之处在于将img元素块化!
<style>
*{margin:0;padding:0}
li{list-style-type:none}
</style>
<body>
<ul style="width:200px;border:1px solid red">
<li>
<img style="display:block;margin:0 auto;" src="1.jpg">
</li>
</ul>
</body>
<style>
*{margin:0;padding:0}
li{list-style-type:none}
</style>
<body>
<ul style="width:200px;border:1px solid red">
<li>
<img style="display:block;margin:0 auto;" src="1.jpg">
</li>
</ul>
</body>
更多追问追答
追问
跑了一下，水平居中没问题。但是垂直居中不能，这个是居顶居中
追答
ul你设置高度的？如果没设置高度，可以用ul{padding-top: 某某值}调节的，然后让他垂直居中。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
text-align:center; 如果发现图片不能对齐的话，可以对它单独设置个padding值~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
li{
display:table-cell;
text-align:center;
line-height:xxpx;
}
img{
vertical-items:midden;
}
或者
li{
display:flex;
justify-content:center;
align-items:center;
}
display:table-cell;
text-align:center;
line-height:xxpx;
}
img{
vertical-items:midden;
}
或者
li{
display:flex;
justify-content:center;
align-items:center;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在ul外加个div，设置div的大小跟你图片的一样看看
更多追问追答
追问
怎么居中
追答
ul{text-align:center}这个代码一般可以的再不行就加下面的
ul li{line-height:120px;}这只是在你的代码上加的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
