中心我的形象里面ul li div [英] center my image inside ul li div
问题描述
我已经在我的页脚放置了一个图像，我想它的中心，但我无法工作
我想我的图像居中，所以我希望有人可以帮助我看看我的代码
HTML
< div class =center>
< ul>
< li>< a href =＃target =_ blankclass =centering _>< / a>< / li>
< / ul>
< / div>
CSS：
code> .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;}
pre>
编辑：
这是jsFiddle中的一个例子： http://jsfiddle.net/XJbaM/
在我的代码中，我有两个图标在我的页脚，我想要的是删除右图标en
解决方案。添加这样的封装div。
< div&
< ul>
< li>
< div class =wrapper>
< a href =img>< / a>
< / div>
< / li>
< / ul>
.wrapper {
margin：0 auto;
width：/ *你的img是多少PX EM％etc * /;
text-align：center;
}
我在我的浏览器和其工作中测试过。这里是我使用的完整代码：你和你的混合
<！doctype html&
< html>
< head>
< meta charset =utf-8>
< title>无标题文档< / 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 =_ blankclass =centering _>< / a>< / div> / li>
< / ul>
< div class =clear> ss< / div>
< / div>
< / body>
< / html>
现在我的手机号码是什么？
I have placed a image in my footer and i want it to center but i wont work I want my image centered so i hope someone can help me take a look at my code
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;}EDIT: Here is a example in jsFiddle: http://jsfiddle.net/XJbaM/
In my code i have two icons in my footer, what i want is remove the right icon en center de left icon in my footer, the text above the icons is already centered
SOLVED
解决方案Add a wrapper div like this.
<div> <ul> <li> <div class="wrapper"> <a href="img"></a> </div> </li> </ul>and the css for wrapper:
.wrapper { margin:0 auto; width: /* how big your img is PX EM % etc */; text-align:center; }I TESTED THIS IN MY BROWSER AND IT WORKS. HERE IS THE EXACT CODE I USED: A MIX OF YOURS AND MINE
<!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>NOW WHERES MY PIRATES BOOTY?
这篇关于中心我的形象里面ul li div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
