CODEWITHSUNDEEP
htmlcssfirefox
BoneStarr
BoneStarr

Reputation: 195

Center aligning an element with firefox and 100% width

So Im trying to do a simple header where I have the text aligned central with a 2px border running underneath this.

The code I have works and should work perfectly on every other browser except firefox which is aligning the border right of the page as if the beginning of the border is aligned in the center. If I remove the text align center the border is placed perfectly but the text is aligned to the left obviously. Why is firefox doing this?

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>

Upvotes: 0

Views: 144

Answers (3)

fasiha ikram
fasiha ikram

Reputation: 23

Try this:

@-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;
  }
  }

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106008

since your pseudo element is in position:absolute; it has no width in the flow of your content and follows text-align:center; set on parent.( as absolute it has, in the flow of content, 0 for heigh and width).

3 possibilities:

  1. add the rule : left:0; no matter what text-align on parent will be, it will be drawn from left coordonates.
  2. add the rule : display:block; so it behaves like a block element and ill ignore the text-align, it will do a break line and will be drawn from left or right (follows the direction/dir of document).
  3. keep it in the flow:
.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;
}

Upvotes: 3

Rahil Wazir
Rahil Wazir

Reputation: 10132

Using property left solved the problem:

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

Demo

Upvotes: 2

Related Questions