Center and justify text at the same time

Get Started
1

Adding a quick trial to my css testpage to simultaneously center and justify 2 lines of text was not as easy as I thought.

Searching through various sites and forum post, it seemed that the following should work

	
as an id (tried inline and class as well) in the style sheet:
#phone { width:97%; margin-left: auto; margin-right: auto; text-align:justify ; font-size: 2em; font-family: verdana, arial, helvetica, geneva; font-style: normal;
 color:red; font-weight: 800; }

and this in the html

<p> call </p>
<div id="phone">
	<br>Mon-Fri 08.30-20.30 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0208 265 8822
	<br>Emergencies out of hours &nbsp;&nbsp; 07852 736 626
</div>

<p> call </p>

I know it looks dreadful and all that, but it was only done this way to eliminate other parts influencing this block.
To my surprise, nothing I changed made the little block center and justify at the same time. Surely, this is possible but no example I found actually worked.
I’ve tried in Firefox, Chrome and Opera.
Where do I go wrong?

2

You can center the paragraph and add an extra element to which you can apply the text style:

p {
    margin:auto;
    width:80%;
}

p span {
    text-align: justify;
}
3

Actually, your text is justified. But effectively you have two lines, because of the break tags. Justification does not take place on the last line of text, for reasons that become obvious when you consider there may only be two words on that line.

Narrow your browser window, or make the DIV width smaller, and you should see it justify.

If I understand what you are trying to do, check out this revised code: http://thewebwiz.net/temp/benbob/

Cordially, David

4

Justified text is demonstrably harder to read and should be avoided on usability engineering grounds.

5

Important typography (print or web) note: Justification only happens on FULL LINES of text, that is lines of text that go from the left edge to the right edge of their container. So if you only have 4 words,it will look exactly like left-justified ( was will the last , incomplete) line of text of any long block of type).

You really don’t need the extra element… for mere justification ( text-align must happen in a block element, not a span; as a span shrinkwraps to the width of its content)

For this particular application floating the two elements may be the only way to go.

6

That is interesting. Do you have any links to studies/experiments related to this?

7

Doh…
Guess I wasn’t having my brightest day in the week. :blush:

8

That actually isn’t quite what I was trying to achieve. What I am trying to do, is to code the two lines in such a way, that wrapping of the pages around images will NOT change the positioning of the 2 lines relative to each other, irrespective of the positioning of the images, the size of the image and the resolution/size/zoom of the page. Athe same time, they should remain the same relative to the rest of the page in line with fluid design, AND centered AND justified.
This little block will than be inserted wherever it makes sense on all pages of my site, and look (more or less) the same everywhere.

9

Some dyslexic users will have difficulty will fully-justified text - I don’t. Justified text causes uneven inter-word spacing, which can create ‘rivers of white space’ for some dyslexics. It is not usually so much an issue with print. The computer has to calculate spacing and font sizes thus sometimes the dyslexic will focus too much on the uneven spaces rather than the words. People whom have Meares Irlen syndrome may also have such issues.

10

After recovering from my “dohhhhh” :blush: -moment, I added a third line to the block for the first 2 lines justify. But they didn’t. :confused:

html now

<p> call </p>
<div id="phone">
	<br>Mon-Fri 08.30-20.30 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0208 265 8822
	<br>Emergencies out of hours &nbsp;&nbsp; 07852 736 626
	<br> Try the other number if no answer on the first
</div>
<p> call </p>

and the css

 #phone { font-size: 2em; font-family: verdana, arial, helvetica, geneva; font-style: normal; color:red; font-weight: 800; text-align: justify;
}

I made double sure the altered css was read upon refresh by changing the color; that bit worked fine. Why is the justify refusing to work here, but works fine in the rest of the page???