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?
Place the tag < CENTER > and < /CENTER > around the whole div. It will center the div.
<CENTER>
<div class="center">
<ul>
<li><a href="#" target="_blank" class="centering_"></a></li>
</ul>
</div>
</CENTER>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.