Как выровнять элемент внутри div по вертикале ?

программирование html css верстка

Есть блок(.one) на фоне круглая картинка, по центру этой картинки идет ещё один блок(.play).

Проблема следующая, по горизонтали выравнял хорошо, а вот по горизонтали не получается, постоянно из-за отступов вылазит фон.


И так, вот пример:

<---------------html------------------------------------------>

<div class="one">
<a href=""class="play"></a>
</div>

<---------------html------------------------------------------->


<---------------css------------------------------------------->
a.play {
display: block;
width: 40px;
height: 40px;
text-decoration: none;
background: url(3f66e7.png);
text-align: center;
line-height: 39px;
margin: 0px auto;
}

a.play:hover {
background-position: 0 -40px;
text-decoration: none;

}


.one {
background: url(216f95.png);
text-align: center;
display: block;
width: 72px;
height: 72px;
}
<---------------css------------------------------------------->


Примечание:
Вот блин, только проснулся и понял, что написал хрень полную. Извините.

Проблема следующая, по вертикале выравнял хорошо, а вот по горизонтали не получается, постоянно из-за отступов вылазит фон.

Примечание:
О боги, опять не то.

ПО ГОРИЗОНТАЛИ ВСЕ ОК, ПО ВЕРТИКАЛЕ - Ж*ПА.

Примечание:
Решил проблему часом раньше чем увидел ответ. Но Ваш ответ, smk1 практически такой же. Спасибо.

/* text-align: center; не к чему */ для задумки нужен.
Ответы:
.one {
Добавьте/измените:
.one{
  width: 40px;
  height: 40px;
  padding:16px
}
Если известна ширина и высота обоих блоков, можно позиционировать ссылку. Работать будет в любом браузере.
a.play {
         display: block;
         width: 40px;
         height: 40px;
         text-decoration: none;
         background: url(3f66e7.png);
         text-align: center;
         line-height: 40px;  
         position:absolute;
         left:16Px;  /* (72-40)/2 */
         top:16Px;  /* (72-40)/2 */
}


11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.