Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

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

Started by Dagoth Nereviar, Mar 05 2007 12:11 AM

7 replies to this topic

#1 Dagoth Nereviar

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 536 posts
  • Gender:Male
  • Location:Leeds, UK
  • Interests:Spellbinder!

Posted 05 March 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 :( Although if another coding language needs to be used, then that's ok :P

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 :( without going through the whole alphabet)

Thanks to any who reply :(

Edited by Dagoth Nereviar, 05 March 2007 - 12:12 AM.

#2 BuffaloHelp

    Sterling Archer

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 4,088 posts
  • Gender:Male
  • myCENT:50.18

Posted 05 March 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).

#3 kraizii88z

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 101 posts
  • Gender:Female
  • Location:Gahanna, Ohio

Posted 05 March 2007 - 02:15 AM

The only thing i could think of would be to justify a table and center it.

Edited by kraizii8z, 05 March 2007 - 02:16 AM.

#4 rvalkass

    apt-get moo

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 3,107 posts
  • Gender:Male
  • Location:Devon, England
  • Interests:At the moment, Physics mainly!
  • myCENT:69.42
  • Spam Patrol

Posted 05 March 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.

#5 jlhaslip

    Insert Custom Title Here

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,040 posts
  • Gender:Not Telling
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • myCENT:81.07
  • Spam Patrol

Posted 05 March 2007 - 07:19 AM

Is this any better?
Adjust the spacing by increasing the margin on the class.

<!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>

I placed a "non-breaking space" in the narrow glyphs and two in the "I". No adjustment to the 'W'. Might work?

#6 Dagoth Nereviar

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 536 posts
  • Gender:Male
  • Location:Leeds, UK
  • Interests:Spellbinder!

Posted 11 March 2007 - 09:03 PM

Thank you for all the replies :P

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?

#7 jlhaslip

    Insert Custom Title Here

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,040 posts
  • Gender:Not Telling
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • myCENT:81.07
  • Spam Patrol

Posted 11 March 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.

#8 iGuest

    Hail Caesar!

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,876 posts
  • Interests:Trap17 Free Web Hosting, No Ads

Posted 27 December 2009 - 01:16 AM

Tonus Maximus SuronimousIs It Possible To Align Text To The Center And Justify It?

This is a reply to a very old post, I doubt it will still interest Dagoth Nerevia, but here it is for the G00glers:

<HTML>

<STYLE>

p  { font-family: sans serif; font-size: 0.875em; margin-left: 30% ; }

</STYLE>

<p>Beginning with A</p>

<p>Beginning with O</p>

<p>Beginning with V</p>

<p>etc, etc, </p>

</HTML>

(The key to this is : "margin-left: 30%;". The "30%" can be whatever.)

Hope this helps somebody in the years to come...

 

 

 


Back to CSS (Cascading Style Sheets) · Next Unread Topic →

Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Discuss Anything
  2. → Main
  3. → Computers
  4. → Programming Languages
  5. → CSS (Cascading Style Sheets)
  6. Welcome - Start here! - Free Web Hosting