Центрирование заголовка на теге img внутри <a>родительских тегов - PullRequest
Новая
       9

Центрирование заголовка на теге img внутри <a>родительских тегов

1 голос
/ 27 апреля 2011

Я хочу центрировать заголовок на теге img, содержащемся в тегах <a></a>.

Вот мой HTML: 

<html>
<body> 
   <ul>
       <li>
          <a>
            <p><img></p>
          </a>
      </li>
   </ul>
<body>
</html>

А вот моя таблица стилей CSS: 

#navigator ul li a p img{
   margin: 0em 0 0 0em;
   display: inline;
}

#navigator ul li a {
   float:left;
   padding: 0 0 0 0;
   margin:0 auto 0 1em;
}

#navigator ul li a p{
   padding: 0 0 0 0;
   margin:0 auto 0 auto;
}

Как мне это сделать?Заранее спасибо за любую помощь.

1 Ответ

0 голосов
/ 27 апреля 2011

Посмотрите на эту JS Fiddle, показывая, как я это сделаю: http://jsfiddle.net/YmWnh/

Я переделал части вашего кода (без закрывающего тега тела) и добавил контент, чтобы получить центрированный эффект. Если вы структурируете HTML так: 

<ul id="navigator">
  <li>
    <a href="#">The Caption</a>
    <img src="image.jpg">
  </li>
  <li>
    <a href="#">Caption 2</a>
    <img src="image2.jpg">
  </li>
</ul>

Тогда этот CSS выполняет свою работу: 

#navigator li {
    width: 100px;
    float: left;
    margin: 0 10px 0 0;
}

#navigator li img, #navigator li a {
   display: block;
}

#navigator li a {
    text-align: center;
}

Ширина li ограничивает дочерние элементы изображения и привязки и позволяет им центрироваться (или нет) относительно li.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...