Border pushing text from center

Question

I'm trying to get the h1 text on the top center of the page, but when I add a border the width of the border extends the entire top part of the page. When I decrease of the width of the element using CSS the border pushes the text towards the left.

Before changing width

enter image description here

After changing the width

enter image description here

Demo :

JSfiddle

The border doesn't push the text to the left. The text is pushed to the left because you reduce the width and the element is aligned to the left. — Oriol, Jan 05 '15 at 01:26

akaBase · Answer 1 · 2015-01-05T01:25:46.063

0

You can use margin: 0 auto in your css like this

h1{
    text-align: center;
    border: 3px solid green;
    width: 50%;
    margin:0 auto;
}

Hope this helps

edited Jan 05 '15 at 01:25

answered Jan 05 '15 at 00:36

akaBase

2,178
1
18
31

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Remove float property and add margin: 0 auto to center h1 as it is a block element.

JSFiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 05 '15 at 00:37

potashin

44,205
11
83
107

Mind me asking what the 'auto' in margin does? – IE8IsBetterThenGoogleChrome Jan 05 '15 at 00:39
@IE8IsBetterThenGoogleChrome : browser itself calculates the `margin` property equally from both sides. – potashin Jan 05 '15 at 00:42

score 0 · Answer 3 · answered Jan 05 '15 at 01:16

0

Try pasting this in the css,

h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}

The changes made are: removed "float:center;" and added "margin:0 auto;"

Hope this helps.

answered Jan 05 '15 at 01:16

Pavithra Ashwath

163
8

score 0 · Answer 4 · answered Jan 05 '15 at 02:28

The issue is with the float, there is no float for center, just left and right. Because you have declared a width you can use margin: 0 auto which will center your h1. Keep in mind that if you remove the width the margin: 0 auto will not work.

h1{
    text-align: center;
    border: 3px solid green;
    width: 50%;
    margin:0 auto;
}

Border pushing text from center

JSfiddle

4 Answers4

JSFiddle