I read across the line

Question

I placed 5 li with an image for each link a within the Li. After that, I put one :hover in Li so that the image changed when passing the mouse over, but it turns out that the width this 100%, and I can’t trade it because mine div would not be centralized in the case.

Someone has a solution?

To illustrate: the width of the button is 184px and the width of hover was in 100%(page), follows image and code:

//Ranking
#ranking{
  width:100%;
  margin-top:1155px;
  position: absolute;
  margin-left:-388px;
}

#ranking ul{
  width:100%;
  text-align: center;
  padding:0px;
  margin:0px;
  list-style: none;
}

#ranking ul li {
  width:100%;
  background:url(../imagens/button.png) no-repeat center;
  padding:10px;
  margin:0px;
}

#ranking ul li a{
  height:27px;
  width:184px;
  font-family: "Myriad Pro";
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  color:#E4E4E4;
}

#ranking li a:hover{
}

#ranking ul li:hover{
  background:url(../imagens/buttonhover.png) center no-repeat;
}

<!-- Index.php -->

<div id="ranking">
	<ul>
		<li><a href="#">Top PvP</a></li>
		<li><a href="#">Top PK</a></li>
		<li><a href="#">Top Clan</a></li>
		<li><a href="#">Top Online</a></li>
		<li><a href="#">Boss Online</a></li>
	</ul>
</div>