Выравнивание по центру элемента с firefox и шириной 100%

Question

Выравнивание по центру элемента с firefox и шириной 100%

0

Итак, я пытаюсь сделать простой заголовок, где у меня есть текст, выровненный по центру, с границей 2px, проходящей под этим.

Код, который у меня есть, должен работать отлично в любом другом браузере, кроме firefox, который выравнивает границу справа от страницы, как если бы начало границы выравнивалось по центру. Если я удаляю центр выравнивания текста, граница будет помещена отлично, но текст выравнивается влево, очевидно. Почему Firefox делает это?

CSS:

  .my-title {
    position: relative;
    margin-bottom: 70px;
    padding-bottom: 15px;

}
.my-title:after {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #ffd500;
    content: "";
    width: 100%;

}
.align-center {
    text-align: center;
}

Html:

<div class="row">
      <div class="col-xs-12">
        <hgroup class="my-title align-center">
          <h1>Header</h1>
          <h2>Sub-Header</h2>
        </hgroup>
      </div>
    </div>

BoneStarr 16 фев. 2014, в 15:10

Источник

1

Не используйте <hgroup /> поскольку оно было исключено из спецификации HTML5.
Rahil Wazir 16 фев. 2014, в 13:28
1

Спасибо, я не понимал, просто всегда использовал его, что бы я использовал вместо этого?
BoneStarr 16 фев. 2014, в 13:34
0

Там нет текущей замены для <hgroup> хотя.
Rahil Wazir 16 фев. 2014, в 13:36

Показать ещё 1 комментарий

Теги:

html

css

css3

firefox

3 ответа

3

поскольку ваш псевдоэлемент находится в position:absolute; он не имеет ширины в потоке вашего контента и следует text-align:center; установленный на родительском (как абсолютный он имеет, в потоке содержимого, 0 для высоты и ширины).

3 возможности:

добавьте правило: left:0; независимо от того, какой текст будет выровнен по родительскому элементу, он будет нарисован из левых координаторов.
добавить правило: display:block; поэтому он ведет себя как элемент блока и плохо игнорирует text-align по text-align, он будет делать линию прерывания и будет нарисован left или right (следует за direction/dir документа).
держите его в потоке:

.my-title {
  position: relative;
  margin-bottom: 70px;
  padding-bottom: 15px;
}
.my-title:after {
  height: 2px;
  background-color: #ffd500;
  content: "";
  width:100%;
  display:inline-block;
  vertical-align:bottom;
}
.align-center {
  text-align: center;
}

G-Cyr 16 фев. 2014, в 12:31

0

Все действительные ответы, спасибо!
BoneStarr 16 фев. 2014, в 13:43

0

Попробуй это:

@-moz-document url-prefix()
  {
  .my-title 
  {
  position: relative;
  margin-bottom: 70px;
  padding-bottom: 15px;

  }

  .my-title:after 
  {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #ffd500;
  content: "";
  width: 100%;
  }

  .align-center
  {
      text-align: center;
  }
  }

fasiha ikram 16 фев. 2014, в 11:26

Ещё вопросы

Не используйте <hgroup /> поскольку оно было исключено из спецификации HTML5.
Спасибо, я не понимал, просто всегда использовал его, что бы я использовал вместо этого?
Там нет текущей замены для <hgroup> хотя.
Все действительные ответы, спасибо!

Rahil Wazir · Accepted Answer · 2014-02-16T10-48-00.000Z

Использование свойства left разрешило проблему:

.my-title:after {
    left: 0;
}

Demo

Ты красавица! Это решило проблему, высоко ценится. Знаете ли вы, почему Firefox добавляет это? все остальные браузеры были в порядке, в том числе, как ни странно.