gpt4 book ai didi

html - 将我的图像置于 ul li div 中

转载 作者:行者123 更新时间:2023-11-28 15:44:36 25 4
gpt4 key购买 nike

我在页脚中放置了一张图片,我希望它居中,但我不会工作我希望我的图像居中,所以我希望有人能帮我看看我的代码

HTML

<div class="center">
<ul>
<li><a href="#" target="_blank" class="centering_"></a></li>

</ul>
</div>

CSS:

.center 
{
width: 84px;
margin: 0 auto;
}
.center ul
{
width: 209px;
line-height: normal;

}
.center ul li
{
float: left;
margin-right: 11px;

}
.center ul li.last
{
margin-right: 0px;
}
.center ul li a
{
display: block;
height: 33px;
width: 33px;
}

.centering_ {background: transparent url('../images/hello.png') no-repeat;}

编辑:这是 jsFiddle 中的示例:http://jsfiddle.net/XJbaM/

在我的代码中,我的页脚中有两个图标,我想要的是在我的页脚中删除右边的图标 en center de left icon,图标上方的文本已经居中

已解决

最佳答案

像这样添加一个包装器 div。

<div>
<ul>
<li>
<div class="wrapper">
<a href="img"></a>
</div>
</li>
</ul>

和包装器的CSS:

.wrapper {
margin:0 auto;
width: /* how big your img is PX EM % etc */;
text-align:center;
}

我在我的浏览器中对此进行了测试,它可以正常工作。这是我使用的确切代码:你的和我的混合

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.center
{
width: 784px;
margin: 0 auto;
border: 1px solid #000;
}
.center ul
{
width: 709px;
line-height: normal;

}
.center ul li
{
float: left;
margin-right: 11px;
border: 1px solid #000;
width:500px;

}
.wrapper {
margin:0 auto;
width:500px;
text-align:center;
}
.center ul li.last
{
margin-right: 0px;
}
.center ul li a
{
display:inline-block;
height: 33px;
width:100px;
}
.clear {
clear:left;
}

.centering_ {background-image:url(img/activenav.png);
background-repeat:no-repeat;}
</style>
</head>

<body>
<div class="center">
<ul>
<li><div class="wrapper"><a href="#" target="_blank" class="centering_"></a></div></li>

</ul>
<div class="clear">ss</div>
</div>
</body>
</html>

现在我的海盗战利品在哪里?

关于html - 将我的图像置于 ul li div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14774074/

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