CSS如何垂直对齐我的文本和文本颜色

Question

This is my output now

This is the output I want

My coding:

.buttons{
background-image:url("SlicingImage/button_unselect.png");
margin: none;
height: 53px;
width: 180px;
text-transform:uppercase;
text-align:center;
position:relative;
vertical-align:bottom;
}

HTML :

<li class="buttons">home</li>

But nothing changed :(

Answer 1

General tip : if its just a link and not a paragraph, always give line-height equal to div height to align your text vertically in the middle

here add line-height:53px; to your class

Answer 2

Vertical-align: bottom; works only with table-attributes like Table-cell or Table-Row

So:

.buttons{
   background-image:url("SlicingImage/button_unselect.png");
   margin: 0;
   height: 53px;
   width: 180px;
   text-transform:uppercase;
   text-align:center;
   position:relative;
   vertical-align:bottom;
   display: table-cell
}

You need to play with this; here a explanation about it: http://www.onenaught.com/posts/201/

Answer 3

Try this:

.buttons{
background-image:url("SlicingImage/button_unselect.png");
margin: none;
/*height: 53px;
width: 180px;*/
padding: 30px 30px;
text-transform:uppercase;
text-align:center;
position:relative;
vertical-align:bottom;
}

Answer 4

the vertical align does not work like that for what your'e trying to do.

you need to use line-height or padding to resolve this issue.

i would try line-height first

   .buttons { line-height: 100px; }

and also remove the height: 53px from your code. But adjust line-height accordingly.

Or you could also try

   .buttons { padding-top: 16px; }

and adjust accordingly