Center align line below text

Question

I have a line below my h2 element.

It is left aligned, but I'd like to center align this directly below the text.

Can someone help resolve this?

h2 {
  display:block
}

h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    margin-top: 10px;
    width: 50px;
}

<h2 class="text-center">Welcome to our Website</h2>

vedankita kumbhar · Accepted Answer · 2017-01-04T11:33:41.100

1

Try this

h2 {
    display: inline-block;
    position:relative;
}
h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    width: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position:absolute;
}

edited Jan 04 '17 at 11:33

answered Jan 04 '17 at 11:29

vedankita kumbhar

1,468
6
19
42

1

Please make sure not to spoil your code in a haste to answer the question. – Shobhit Srivastava Jan 04 '17 at 11:30
1

Why would you specify the margin twice in your code? That's incorrect – Shobhit Srivastava Jan 04 '17 at 11:33
Thanks I forgot to remove that – vedankita kumbhar Jan 04 '17 at 11:33
1

@michaelmcgurk @vedankita There are flaws here. A `display: inline-block` is not required if you are going to absolutely position the line inside. Also, `position: absolute` is unnecessary in this context. A simple `margin: 0 auto` with `display: inline-block` should be the ideal solution. Check my answer. – nashcheez Jan 04 '17 at 11:51

nashcheez · Answer 2 · 2017-01-04T11:36:49.830

0

Best way would be to use display: inline-block on the parent & margin: auto on the child.

h2 {
  display:inline-block
}

h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    width: 50px;
    margin: 10px auto 0 auto;
}

<h2 class="text-center">Welcome to our Website</h2>

edited Jan 04 '17 at 11:36

answered Jan 04 '17 at 11:30

nashcheez

5,067
1
27
53

1

@ShobhitSrivastava No its fine when you are using css properties that can have multiple values i.e a `margin-top` later can override a simple `margin` value. When using the same class across multiple elements its a common practice. In this case it could have been combined. Hence, updated. – nashcheez Jan 04 '17 at 11:40
@ShobhitSrivastava What is incorrect is you down-voting a perfectly correct answer due to ignorance & lack of knowledge. – nashcheez Jan 04 '17 at 11:42
Shobhit Srivastava@ My code was not semantic, but It does not mean that solution is wrong. and you should not have done downvote :( – Santosh Khalse Jan 04 '17 at 13:10
I will let the following links answer for me: http://stackoverflow.com/questions/18653771/is-it-valid-to-assign-a-value-twice-to-the-same-property-within-one-rule http://stackoverflow.com/questions/6065958/defining-css-properties-twice Please provide some proof for your argument which anyway is baseless. And the statement up there should be `whose sole purpose`. So far for calling everyone else incorrect! P.S. Ignorance is bliss, but being ignorant of Ignorance is what makes you a jerk. – nashcheez Jan 04 '17 at 13:33

score 0 · Answer 3 · answered Jan 04 '17 at 11:47

Alternatively, instead of using margin as suggested by others, you can set left: 50%; and transform: translateX(-50%);

This method of centering can come in handy when you are unable to use margin, or you have a margin set for another reason.

h2 {
    display: inline-block;
    position:relative;
}
h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    width: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

<h2 class="text-center">Welcome to our Website</h2>

score -1 · Answer 4 · answered Jan 04 '17 at 11:29

-1

Try this:

h2 {
  display:inline-block;

}

h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    margin-top: 10px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
}

answered Jan 04 '17 at 11:29

Shobhit Srivastava

549
3
13

Santosh Khalse · Answer 5 · 2017-01-04T11:43:12.060

-1

Try this code for this issue

h2 {
        display: block;
        text-align: center;
    }
    
    h2:after {
        border-bottom: 4px solid #ae263d;
        content: "";
        display: block;
        margin: 10px auto 0px auto;
        width: 50px;
    }

<h2 class="text-center">Welcome to our Website</h2>

edited Jan 04 '17 at 11:43

answered Jan 04 '17 at 11:29

Santosh Khalse

12,002
3
36
36

Center align line below text

5 Answers5