How to prevent header's text from being left-aligned?

Question

I'm writing a Markdown theme in CSS but I have some issues with headers styling. Right now the h1 is styled as follows:

h1 {
  border-top: 1px solid black;
  width: 10%;
  margin: 0 0 100px 45%;
  padding: 0;
  text-align: center;
}

And it renders like this:

The problem is, when the header contains a word which exceeds 10% in width, that word acts like left-aligned.

Key question:
How do I prevent very long words from being left-aligned, without adding HTML tags?

Possible duplicate of [Can overflow text be centered?](http://stackoverflow.com/questions/6618648/can-overflow-text-be-centered) — Jeroen, Nov 28 '15 at 14:23
Seems not like a duplicate to me since I cannot use additional HTML tags. — Filippo Costa, Dec 01 '15 at 19:55

Mark Ng · Answer 1 · 2015-11-28T15:01:18.763

0

EDIT: Not what the OP looking for.

word-wrap: break-word;
word-break: break-all;

   h3 {
      /* omitted font details... */
      position: absolute;
      border-top: 1px solid #cccccc;
      width: 10%;
      margin: 0 87% 0 3%;
      text-align: center;
      padding: 0 1% 0 1%;
      word-wrap: break-word;
    }

edited Nov 28 '15 at 15:01

answered Nov 28 '15 at 14:25

Mark Ng

200
3
11

Wrap is not what I am looking for. I need to keep everything inline, just centered. – Filippo Costa Nov 28 '15 at 14:31
just centered? even if the text content overflow? – Mark Ng Nov 28 '15 at 14:36
Yes. That's not a problem since I have some padding around the header. EDIT the **word** needs to be displayed inline, but I wanna break the line immediately after. – Filippo Costa Nov 28 '15 at 14:37

How to prevent header's text from being left-aligned?

1 Answers1