IPB

Welcome Guest ( Log In | Register )



Tags
This content has not been tagged yet
 
 Reply to this topicStart new topic

Is It Possible To Align Text To The Center And Justify It?

, Example inside!
Dagoth Nereviar
no avatar
Privileged Member
*********
Group: [HOSTED]
Posts: 536
Joined: 19-May 06
From: Leeds, UK
Member No.: 23,963
Post #1 post Mar 5 2007, 12:11 AM
Basically, I have a list (like shown below) but as you can see, some parts stick out more than others, and it doesn't look ordered.

What I wish to know is if it's possible to justify the text so it's ordered, but also keep it in the centre, using CSS tongue.gif Although if another coding language needs to be used, then that's ok smile.gif

Example:
Beginning with A
Beginning with O
Beginning with V
Beginning with W
Beginning with I
Beginning with M
Beginning with P


(Random letters to show how I mean easier tongue.gif without going through the whole alphabet)

Thanks to any who reply biggrin.gif

This post has been edited by Dagoth Nereviar: Mar 5 2007, 12:12 AM
Go to the top of the page
+Quote Post
BuffaloHelp
no avatar
More than meets the eye
******************
Group: Admin
Posts: 3,762
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
myCENT:49.00
Post #2 post Mar 5 2007, 01:02 AM
What you mean by "ordered" as in it's not aligned with each other at all? This cannot be possible using just CSS or anything else because the character width of each letters, i.e. A, O, V, W, I, M and P.

The simplest way to resolve the alignment issue is to create LETTERS in graphics with all of them having the same width and height.

The method you should try is to align "Beginning with" and let LETTERS drift off

Beginning with A
Beginning with O
Beginning with V
Beginning with W
Beginning with I
Beginning with M
Beginning with P

And these would be enclosed within a DIV or TABLE and centered to a page...

The complicated way is to use CSS to set LETTERS as the same width with same space apart. But you may end up with 26 different cases to align them all in a line, not to mention they may not look all the same (some wider than others).
Go to the top of the page
+Quote Post
kraizii88z
no avatar
Advanced Member
*******
Group: [HOSTED]
Posts: 101
Joined: 19-February 07
From: Gahanna, Ohio
Member No.: 38,904
Post #3 post Mar 5 2007, 02:15 AM
The only thing i could think of would be to justify a table and center it.

This post has been edited by kraizii8z: Mar 5 2007, 02:16 AM
Go to the top of the page
+Quote Post
rvalkass
no avatar
apt-get moo
****************
Group: [MODERATOR]
Posts: 2,711
Joined: 28-May 05
From: Devon, England
Member No.: 7,593
Spam Patrol
myCENT:54.70
Post #4 post Mar 5 2007, 06:28 AM
I would put the entire list in a DIV, and set the text alignment within the DIV to justify. This will (obviously) justify the list. Then, if you set the left and right margins of the DIV to auto, then it will centre align the DIV within the parent element. This should give the look of a centre-aligned, justified list. I've tried it and it does work, although you have to fiddle around with the width of the DIV to get the look you want.
Go to the top of the page
+Quote Post
jlhaslip
no avatar
Insert Custom Title Here
*******************
Group: [MODERATOR]
Posts: 4,908
Joined: 24-July 05
From: Linux, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
myCENT:6.20
Post #5 post Mar 5 2007, 07:19 AM
Is this any better?
Adjust the spacing by increasing the margin on the class.

[codebox]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link type="text/css" rel="stylesheet" href="./w3c_suggested.css" media="all" />

</head>
<style type="text/css">

.box {
margin: 0;
padding: 0em;

}
.centre {
margin: 0 2em;
text-align: center;
}
</style>


<body>

<div class="box">
<p class="box" >Beginning<span class="centre">with</span>&nbsp;A</p>
<p class="box" >Beginning<span class="centre">with</span>&nbsp;C</p>
<p class="box" >Beginning<span class="centre">with</span>&nbsp;V</p>
<p class="box" >Beginning<span class="centre">with</span>W</p>
<p class="box" >Beginning<span class="centre">with</span>&nbsp;&nbsp;I</p>
<p class="box" >Beginning<span class="centre">with</span>&nbsp;M</p>
<p class="box" >Beginning<span class="centre">with</span>&nbsp;P</p>
</div>
</body>
</html>
[/codebox]

I placed a "non-breaking space" in the narrow glyphs and two in the "I". No adjustment to the 'W'. Might work?
Go to the top of the page
+Quote Post
Dagoth Nereviar
no avatar
Privileged Member
*********
Group: [HOSTED]
Posts: 536
Joined: 19-May 06
From: Leeds, UK
Member No.: 23,963
Post #6 post Mar 11 2007, 09:03 PM
Thank you for all the replies biggrin.gif

My idea was to use a div, and then a table to align it, which looks like I will have to do.
I'll have to have the heading in a different div too, or else it won't work, right?
Go to the top of the page
+Quote Post
jlhaslip
no avatar
Insert Custom Title Here
*******************
Group: [MODERATOR]
Posts: 4,908
Joined: 24-July 05
From: Linux, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
myCENT:6.20
Post #7 post Mar 11 2007, 11:38 PM
Just a reminder that tables do, in fact, have their uses, although it would appear that you are using the table in a structural way to format the data and that is not what tables are designed for. Using a table for this task is not "semantic" and alternatives should be considered.
Go to the top of the page
+Quote Post
« Next Oldest · CSS (Cascading Style Sheets) · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   4 noxit 8,953 19th June 2004 - 05:45 PM
Last post by: OpaQue
No New Posts   3 Plenoptic 1,381 17th July 2006 - 12:06 PM
Last post by: Plenoptic
No New Posts   0 truvu17 2,412 13th September 2004 - 06:40 AM
Last post by: truvu17
No New Posts   4 electriic ink 1,738 25th July 2006 - 07:28 PM
Last post by: electriic ink
No New Posts   7 -Cooper_NFFC- 5,090 11th October 2004 - 05:52 AM
Last post by: ashiezai
No New Posts   4 hansley 4,759 6th November 2004 - 11:03 PM
Last post by: ronin
No New Posts   13 inverse_bloom 121 1st November 2009 - 06:15 PM
Last post by: buxgoddess
No New Posts   2 Vikash 3,352 15th September 2009 - 11:18 PM
Last post by: iG-Alyssa B. Velasco
No New Posts   11 mirage 5,377 4th July 2009 - 09:14 AM
Last post by: iG-JackARRR
No New Posts   3 lloydg 2,132 12th March 2009 - 04:01 AM
Last post by: Oblivion1500
No New Posts   8 kvarnerexpress 2,668 19th October 2005 - 01:00 AM
Last post by: dul
No New Posts   0 kvarnerexpress 2,794 29th December 2004 - 12:42 PM
Last post by: kvarnerexpress
No New Posts   3 shadow skazi 1,807 29th January 2005 - 10:26 PM
Last post by: whyme
No New Posts   8 Bash 8,679 20th February 2005 - 07:08 PM
Last post by: theoutlaws
No New Posts   1 Binod Singh 3,719 19th February 2005 - 02:18 PM
Last post by: sargilla


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

RSS Open Discussion Time is now: 8th November 2009 - 09:04 AM
© 2009  Trap17: Open Discussion, Free Web Hosting. a member of xisto.

Web Hosting Powered by ComputingHost.com.