In same textblock how to center and align right the same time?

**jef** · Jan 5, 2013 15:36

Hoi CSS fanatics,
just joined your forum. The books I have them since 2001.
But now i ran into a problem and i can not solve it. May somebody else can??
I have a textblock that i center. no problem. Some of the rules are 1-liners, others are not. Ther is a price indication and the end of the rule. I would like to align this price at the right side.
May be it's clearer if you watch the attachment. I know that it is easier if I align one block at the left and the price-block at the end.
But i do need to center the textblock for filling space.
Is there somebody who can fixed this or am i just dreaming and is this impossible in CSS??

Hope you can help me,
thnx & grtz,

jef

**jef** · Jan 6, 2013 05:19

Maybe it will help if i include the css i use:

Code:

#mainR {
	float:right;
        width:483px;
        height: 500px;
        background:#F5D3B0;
        border-top: solid #330000 10px;
        border-right: solid #330000 10px;
        border-bottom: solid #330000 10px;
        margin-right: 7px;
	}


    .mainRh2
 {
   margin-bottom: 3px;
}

 .mainRtekst
 {      font-family: "Verdana",Arial, Helvetica, sans-serif;
        font-size: 14px;
       /* line-height: 1.3;      */
        color:  #330000;
        text-align: center;
        margin: 5px;
}

Tried to work with <span>, like this:

Code:

.mainRalignR
 {
 text-align: right;
 margin-right: 5px;
}

But that does not work either.
Any tip or advice would be welcome.

hope it does.

**Stevie D** · Jan 6, 2013 06:59

There are a couple of easy ways to do this.

One is to use a <table>, and have the description and price in separate columns. It could legitimately be described as tabular data, so there's no problem there. It might also lead to a neater presentation, with the text keeping separate from the price on items with more than one line of text, and the price being vertically centred on those items.

The other is to put the price before the description and set it to float:right;. The downside to this is that it will always appear alongside the first line of the description, whereas you probably want it to appear alongside the last line.

(The reason that you are not getting any joy out of span {text-align:right;} is that a <span> will by definition only be as large as is needed to enclose the text/content within it. You can see this if you put a border on it. So while the text is right-aligned within the <span>, there is nowhere for it to move to, so it looks exactly the same as any other alignment.)

**jef** · Jan 6, 2013 08:52

Thanks Stevie,
Just tried your second tip, but i probably will be doing something wrong, cause the price was either above the first rule or under the last.
I think i better follow your first advice. You're right concerning the presentation.
And also thanks for the explantion with span. I really did make a "thinking error".
Learned a lot.
thnx.

**Paul O'B** · Jan 6, 2013 11:28

Hi,

I assume the attachment was not what you wanted but an example of what you had tried?

If you want the price aligned right you will probably need to move it outside so the text can wrap before.

e.g.
IE8+ only.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.menu {
	margin:20px auto;
	padding:0;
	list-style:none;
	width:50%;
	background:#f5d3b0;
	color:#4d1d18;
	border:5px solid #300;
	padding:20px 1px;
}
ul.menu li {
	text-align:center;
	position:relative;
	zoom:1.0;
	font-size:18px;
	line-height:1.3;
	margin:15px 6em 15px 3em;
	clear:both;
}
ul.menu li strong {
	float:right;
	width:5em;
	text-align:right;
	margin-right:-3em;
	margin-left:-2em;
}
</style>
</head>

<body>
<ul class="menu">
		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem <strong>£11.75</strong></li>
		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet <strong>£11.75</strong></li>
		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem dolor sit amet <strong>£11.75</strong></li>
		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametsit amet Lorem ipsum dolor sit amet <strong>£11.75</strong></li>
		<li>Lorem ipsum dolor sit amet Lorem ipsum dolor <span></span> <strong>£11.75</strong></li>
		<li>Lorem ipsum dolor sit <strong>£11.75</strong></li>
</ul>
</body>
</html>

Or using display:table.
IE8+ only.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.menu {
	margin:20px auto;
	padding:0;
	list-style:none;
	width:50%;
	background:#f5d3b0;
	color:#4d1d18;
	border:5px solid #300;
	padding:20px 100px;
}
ul.menu li {
	text-align:center;
	zoom:1.0;
	font-size:18px;
	line-height:1.3;
	margin:15px 0;
	display:table;
	table-layout:fixed;
	width:100%;
	border-bottom:1px dotted #aaa;
	padding:0 0 10px;
}
ul.menu li strong, ul.menu li span {
	display:table-cell;
	vertical-align:bottom
}
ul.menu li strong {
	width:1px;
	white-space:nowrap;
	text-align:right;
	padding:0 0 0 10px;
}
</style>
</head>

<body>
<ul class="menu">
		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem</span> <strong>£11.75</strong></li>
		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</span> <strong>£11.75</strong></li>
		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem dolor sit amet</span> <strong>£11.75</strong></li>
		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametsit amet Lorem ipsum dolor sit amet</span> <strong>£11.75</strong></li>
		<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor</span> <strong>£11.75</strong></li>
		<li><span>Lorem ipsum dolor sit </span><strong>£11.75</strong></li>
</ul>
</body>
</html>

IE8+ only

Or as Stevie said a normal table would be ok also.

**jef** · Jan 7, 2013 02:06

Hey Paul,

thanks for helping me. I already fixed it with Stevie's tip (tabular data).
And to be honest, is indeed a cleaner and netter result. By the end of the week, you can have a look at www.bistrolafrontiere.com
Then the site will be online.
Thank you all for lookig for a solution.

thnx,

jef

User Tag List

Thread: In same textblock how to center and align right the same time?

Thread Tools

Display

In same textblock how to center and align right the same time?

Bookmarks

Bookmarks

Posting Permissions