Having trouble getting text to center

Question

Okay, I am working on a custom parser for a personal variant of the Creole markup language, and I'm having trouble with a macro I added, which centers text.

Given the following CSS code:

.boxsection {
    text-align:left;
    border:1px solid #333;
    padding:10px;
    margin:10px;
    background:1px solid #ccc;
}

and the following HTML code output by the parser:

<div class='boxsection'>
    <span style='text-align:center'>
        <h4>Center</h4>
        <pre>&lt;&lt;center&gt;&gt;Some text in the middle&lt;&lt;/center&gt;&gt;</pre>
        This macro causes the content inside of it to be centered.
    </span>
</div>

The heading and the text in the block all renders centered, but the last line does not center at all, even though it is inside of the span. I have tried changing the span to another div, with display set to inline, but that didn't work.

The only thing that does work is using the tag, but that tag is deprecated and so I'd prefer to avoid using a solution that may stop working in a future browser update.

Edit: I've uploaded a small HTML page which demonstrates the problem: http://www.wuala.com/zauber.paracelsus/Public/centering_test.html/

Answer 1

It is because your HTML is invalid.

You can't adding elements with default display:block into elements which are by default display:inline .

Change your span to div and it will work.

HTML

<div class='boxsection'>
  <h4>Center</h4>
  <pre>&lt;&lt;center&gt;&gt;Some text in the middle&lt;&lt;/center&gt;&gt;</pre>
  This macro causes the content inside of it to be centered.
</div>

CSS

.boxsection {
  text-align:center;
  border:1px solid #333;
  padding:10px;
  margin:10px;
  background:1px solid #ccc;
}

http://codepen.io/Chovanec/pen/Hyxqe