Центр логотип в шаблоне html5

Question

Я использую шаблон HTML5 и их класс .ir.Я сделал логотип кликабельным, я хочу расположить его по центру на странице, но пока не повезло.Я попробовал поле: 0 авто;и выравнивание текста: по центру;но они оба, кажется, не работают.

HTML

   <a href="/"><h1 class="ir">logo header</h1></a>

и CSS

    h1 {
    height: 373px;
    }

    .ir {
    display: block;
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    background-color: transparent; 
    background-repeat: no-repeat; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0; 
    background-image: url(http://i.imgur.com/yYnyJ.jpg);
    }
    .ir br { display: none; }

Answer 1

Мы не рекомендуем добавлять стили непосредственно в классы помощников. Это означает, что вы не можете использовать их в других случаях, когда вам снова нужен класс .ir (если у вас есть другой фон для замены). Пожалуйста, добавьте имя класса к разметке, которую вы хотите заменить на изображение в дополнение к классу с именем ir, например:

<h2 class="ir myh2classname"></h2>

, а затем добавьте свой фон следующим образом:

.myh2classname {
  background: url(http://i.imgur.com/yYnyJ.jpg) transparent no-repeat center;
}

Таким образом, если у вас есть другое изображение, которое вы хотите использовать в качестве фона для какого-либо другого раздела, все, что вам нужно сделать, это добавить другое имя класса в разметку этого раздела:

  <h3 class="ir anotherimagereplacement"></h3>

, а затем добавьте свой фон для другого раздела, например:

   .anotherimagereplacement {
        background: url(path/to/image);
    } 

Answer 2

Добавьте background-postion: center; к правилу.Возможно, вы захотите использовать top center в качестве значения, если вы хотите выровнять изображение сверху и по центру одновременно.

_{Примечание :: Размер изображения имеетвпоследствии будет меньше, чем <h1>, чтобы появиться в центре.}

Более того, я бы также рекомендовал использовать сокращенное свойство.

.ir {
    display: block;
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0; 
    background: url(http://i.imgur.com/yYnyJ.jpg) transparent no-repeat center;
}

Answer 3

Добавьте следующее в .ir

background-position: center center;