margin-left to a text ( text-align: center)

Question

I have a H2 element with a span and some text:

<h2><span.../> Some text</h2>

The text is centered and I need to place the span on its left. I am using:

span {
  margin-left: -60px;
}

Which is working for Firefox and Chrome, but does not work on Internet Explorer 9. How can I make it work on IE9 and IE8?

score 1 · Accepted Answer · edited Sep 20 '12 at 21:05

1

SPAN is an inline element. These cannot take horizontal margins or padding. You need to make the SPAN display: inline-block.

edited Sep 20 '12 at 21:05

Mark

answered Sep 20 '12 at 21:01

1

Should note that `inline-block` works in IE8 [only if you declare a doctype](http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working). – Roddy of the Frozen Peas Sep 20 '12 at 21:07
inline elements can have left/right padding, just not margin. – Mark Sep 20 '12 at 21:11

score 1 · Answer 2 · answered Sep 20 '12 at 21:08

1

If the text is centered you can use a float: left; on the span. This will always ensure that the span is on the far left of the h2.

If you just want the span to also be centered but at the beginning of the line, you need not do anything because the span is an inline element.

See my example:

example 1 uses float: left; example 2 uses padding.

answered Sep 20 '12 at 21:08

Mark

In your second example, the text is not centered. All elements were centered. – Johnny Everson Sep 21 '12 at 09:32
@JhonnyEverson the text is centered in both examples. I just have added padding to the span to demonstrate that you can have padding on inline elements. – Mark Sep 21 '12 at 12:37

2 Answers2