"Text-Align: Justify;" Inline-Block Elements Properly

text-align: justify; inline-block elements properly?

Updated the "Future" solution info below; still not yet fully supported.

Present Workaround (IE8+, FF, Chrome Tested)

See this fiddle.

Relevant CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Explanation

The display: block on the :before element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative on the inline-block elements the displacement is counteracted, but without adding the additional line back.

Though css cannot directly access a line-height "unit" per se, the use of em in the margin-bottom and top settings easily accommodates any line-height given as one of the multiplier values. So 1.2, 120%, or 1.2em are all equal in calculation with respect to line-height, which makes the use of em a good choice here, as even if line-height: 1.2 is set, then 1.2em for margin-bottom and top will match. Good coding to normalize the look of a site means at some point line-height should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em unit will give the same value as the line-height. And if line-height is set to a non-em length, such as px, that instead could be set.

Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height, or javascript could be used to dynamically read such, but really, the line-height should be known in the context of where this is being used, and the appropriate settings here made.

UPDATE for minified text (no spaces) issue

Kubi's comment noted that a minification of the html that removes the spaces between the <a> elements causes the justification to fail. A pseudo-space within the <a> tag does not help (but that is expected, as the space is happening inside the inline-block element), a <wbr> added between the <a> tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character  --other space characters like thin space and en space did not work (surprisingly).

Nearing a Future Clean Solution

A solution in which webkit was behind the times (as of first writing this) was:

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE */
}

It works in FF 12.0+ and IE8+ (buggy in IE7).

For Webkit, as of version 39 (at least, might have crept in earlier) it does support it without the -webkit- extension but only if the user has enabled the experimental features (which can be done at chrome://flags/#enable-experimental-web-platform-features). Rumor is that version 41 or 42 should see full support. Since it is not seamlessly supported by webkit yet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.

Why doesn't text-align: center work on ul given it contains text

text-align works when you want to center inline (or inline-block) elements that are contained within a parent block level element. You apply the style to the parent element.

Because ul elements are not inline elements, they will not be centered when you apply text-align: center to the parent. They are block level elements and block level elements by default take up the remaining space on that line.

To center a block-level element you can give it a specific width then you can apply margin-left: auto and margin-right: auto to the element. So, in your case if you give the <ul> element a width and set the margin-left and margin-right to auto it will become centered within its parent div. No need for text-align: center.

By default a <ul> does not contain text, but an <li> does. Therefore you can apply text-align: center to an <li> element to center the inline text inside of it.

Also, your <blockquote> elements only contain block-level elements directly: <p> and <footer>. They do not contain text as a direct child descendant. And therefore nothing will be centered inside of it. If you only had text inside of it, then the text would be centered.

Update

As per your comment on centering and left-aligning, if I am understanding you correctly you can do something like this:

<style>
#parent {text-align: center}
#parent ul {display: inline-block; text-align: left}
</style>
<div id="parent">
    <ul>
        <li>....</li>
        <li>....</li>
        <li>....</li>
    </ul>
</div>

The trick here is that you need to override the text-align=center in the ul because otherwise it gets inherited from the parent div.

text-align: center not working

text-align: center affects pure text nodes as well as child elements that have display: inline; or display: inline-block;. Your assumed child element is h1 which by default has display: block;. So even if it were allowed to have an h1 inside a p, this still wouldn't work (for example if you replaced the <p id="center"> by a <div id="center"> you'd still run into "non-working" centering).

p can only have so-called phrasing content, that is, only certain elements are allowed as child elements inside a paragraph.

Usage of any flow content elements (like e.g. h1) results in automated closing of the "surrounding" p tag. So this is what your browser really renders:

<div id="main">
    <p id="center"> </p>
    <h1> TEST </h1> 
</div>

One last thing, because you said that you're a beginner in frontend matters:

Do not use #id selectors in CSS. Always use CSS .classes instead. When you've progressed alot more, read about the why here: http://oli.jp/2011/ids/

HTML: Text:align property working with span or with a tag

The first doesn't because the anchor a is inside an inline element, which just grow to its content's size, and their parent, the body, does not have the property text-align: center set.

The second doesn't because its parent, in this case the body, need to have the rule text-align: center

The third does because the my-class most likely has the text-align property set to center, and as a div is a block element it spawn the full width of its parent, in this case the body, hence the anchor will center inside it.

So, to center an inline (and inline-block) element, its parent need the propertytext-align: center set, and to center a block element, like a div, it has to have a width, less wide than its parent, and its margin's left/right set to auto.

Sample

.centered-span {  text-align: center;}
.centered-div {  width: 50%;  margin: 0 auto;}

<span class="centered-span">Hey there (not centered)</span>
<div class="centered-span">  <span>Hey there - span</span><div>  <div class="centered-div">Hey there - div</div>

    ul {
        text-align: justify;
        border:solid 1px white;
        width: 100%;
    }

    ul:after {
        content: " ";
        display: inline-block;
        width: 100%;
        background: #000;
        height: 10px
    }

    ul > li {
        display: inline-block
    }

}

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>