Как выровнить hello world по центру?

А зачем вы еще прямо в теге стили прописываете? В css-файле места не осталось? )) Пробуйте такой вариант.

Код (PHP):

1. <li class="kolonki">
2.     <span>hello<br>world</span>
3. </li> 

Код (PHP):

1. li.kolonki {
2.     position: relative;
3.     top: 4px;
4.     left: 18px;
5.     height: 40px;
6.     width: 114px;
7.     padding: 13px;
8.     background-color: #804a0b;
9.     background-image: linear-gradient(#cc9a55, #804a0b);
10.     border-radius: 3px;
11.     list-style: none;
12.     font:12px Arial, Helvetica;
13.     font-weight: bold;
14.     text-align: center;
15.     text-decoration: none;
16.     text-transform: uppercase;
17. }
18. li.kolonki::before {
19.     content:'';
20.     display: inline-block;
21.     height: 100%;
22.     vertical-align: middle;
23.     margin-right: -0.36em;
24. }
25. li.kolonki span {
26.     display: inline-block;
27.     vertical-align: middle;
28. }
29. li.kolonki:hover {
30.     color:#45250a;
31.     background: #fff9e0;
32.     background-image: linear-gradient(#f7d683, #e8c478);
33. } 

 

margin left\right - auto =)

 

Уберите все позиционирования и просто в блоке укажите text-align:center; И посмотрите как верстаются шаблоны в 21 веке HTML5 и CSS3 шаблоны

 

спасибо за ссылку, как раз это и искала) удачно зашла на форум