CSS - Vertically Centre Text To An Image

I'm having a bit of mental block. How do I achieve the following:

100% width div

LEFT SPAN (left aligned) | MIDDLE SPAN (centre aligned) | RIGHT SPAN (right aligned)

I thought it was possible in one div rather than having to go the three column layout route?

Hi guys

I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused...

Here is my code:

Code:

<span style="text-align:left;">Jarryd Pearson</span><br /><br />
        <table align="left">
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
         <tr>
          <td class="contact">
           Phone:
          </td>
          <td class="contact">
           ####
          </td>
         </tr>
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
         <tr>
          <td class="contact">
           Mobile:
          </td>
          <td class="contact">
           ####
          </td>
         </tr>
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
         <tr>
          <td class="contact">
           Email:
          </td>
          <td class="contact">
           ####
          </td>
         </tr>
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
         <tr>
          <td class="contact">
           Postal Address:
          </td>
          <td class="contact">
           ####
          </td>
         </tr>
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
        </table>

And here's my CSS:

Code:

@charset "utf-8";
/* CSS Document */

body {
	background: #0d1866;
	color: #CCCCCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	}
a 	{
	color: #FFFFFF;
	text-decoration: underline;
	}
a:hover {
	color: #FFFFFF;
	text-decoration: none;
	}
paypal {
	border: none;
	}
img.footer {
	border: none;
	width: 88px;
	height: 31px
	}
td.contact {
	vertical-align:top;
	}
tr.rule {
	padding: 0px;
	}
	
/* DIVS */
div#main {
	padding: 2px;
	margin: 2px;
	}
div#text {
	width: 650px;
	height: 370px;
	vertical-align: top;
	overflow: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	}

I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction!

Thanks

Jarryd

I'm trying to do something that probably isn't as difficult as it's becoming for me. I want to have a 100% height page, which I've managed okay with so far. I want the header and menu to be a fixed height, and a footer of fixed height too, with the middle section being what expands to fit the whole design. This middle section, however, is a div containing an image that needs to get its height somehow.

I've reverted back to my old fixed code, which loaded a stylesheet depending on the users screen resolution, but it's too limited and I'd like to know how to go about incorporating the 100% height idea.

http://www.ryanbuckley.ca/BRIT/drawings.php

Hi I have been battling with this and have tried some solutions on the net but they dont seem to work this may be simple still got my l plates on.
My center column wont center in ff its fine in ie my code is as follows
body
<div class="bgcolumn"> </div>
<div class="leftcolumn"> </div>
<div class="rightcolumn"> </div>
<div class="centrecolumn"> </div>
styles
.leftcolumn {
padding: 10px;
width: 20%;
float:left;
}
.centrecolumn {
padding: 10px;
width: 50%;
background-image:url(images/house.png);
margin-right:auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
padding: 0px;
text-align: justify;
position:relative top;

}
.rightcolumn {
padding: 30px;
width: 20%;

float: right;
position:relative top;
}
.searchs {
float: right;
padding: 0px;
width: 400px;
position: relative;
}

.bgcolumn {
width: 100%;
padding: 0px;
position: relative;
clear: both;
}

I have a navigation bar that contains four images (side by side) as well as three text links. They all live within a <div> with the following properties:

#gNav {
width:768px;
height:19px;
text-align:left;
vertical-align:middle;
}


i need for the three text links to line up directly in the middle (vertically) of that <div>.

To achieve this in IE6 and NN+, I attach the following style to the text.

.nookum {
font-size:.9em;
vertical-align: 25%;
color:#FFFFFF;
}





I just learned that the vertical-align property is not recognized by IE5 and IE5.5, so in those versions, the text aligns at the bottom of the <div>.

Anyone know of any workarounds or other methods of vertically aligning text that will work in these two versions of IE?

zz

Greetings,

I've set an anchor tag to display:block and have set the height to 80px. Unfortunately, it seems I am unable to move the text associated within the hyperlink to the middle (vertically) of the block. Any ideas on how this can be done?

Is there any way to make some text vertically aligned inside a DIV? Just like you would do inside a cell?

Code:

<table><td valign="middle" height="100">This text is vertically aligned</td></table>

Apparently, the vertically-align CSS property only works if it is relative to other DIVs. What I want is some vertically aligned text inside a DIV.

Thanks for the help.

How to get a text aligned vertically in a css button?

EDIT: no longer required




All the text is at the top of the menus, how do i get them so they are in the center of the divs ?

Code:

#navbar2 { float:right; position:relative; }
ul.menu2 { list-style-type:none; margin:0; padding:0; }
#navbar2 .leaf2 { width:70px; height:35px; float: left; display: inline; list-style-type:none; display:inline; text-align:center; color:#F7941D; font-weight:bold; font-size:12px; background-color:#2E2E2E; margin-left:8px; border-top-left-radius: 5px; border-top-right-radius: 5px; opacity:0.85; filter:alpha(opacity=85); }
#navbar2 li:hover, #navbar2 li.active { opacity:1; filter:none; }
#navbar2 li a { width:70px; height:35px; display:block; padding-top:3px; }
.leaf2 a { width:70px; }

Code:

  <div id="navbar2">
    <ul class="menu2">
      <li class="leaf2<? if ($activePage=="home") {?> active<? } ?>"><a href="." title="Home">home</a></li>
      <li class="leaf2<? if ($activePage=="item2") {?> active<? } ?>"><a href="2.php" title="2">item<br>2</a></li>
      <li class="leaf2<? if ($activePage=="item3") {?> active<? } ?>"><a href="3.php" title="3">item<br>3</a></li>
      <li class="leaf2<? if ($activePage=="item4") {?> active<? } ?>"><a href="4.php" title="4">item4</a></li>
      <li class="leaf2<? if ($activePage=="item5") {?> active<? } ?>"><a href="5.php" title="5">item5</a></li>
    </ul>
  </div>		

ok.

Ive been trying to use CSS to style my page instead of tables. but I cant get stuff to line up right.

basically I have a div spanning the whole width of a css box. inside that div I have 3 sections, one for left-aligned text, one for center aligned text and one for right aligned text.

what I want is to display on the far left a left arrow image (for use as a button) and the word 'Previous'. then in the middle of the div, center aligned, I want to display the words 'select a different draw' and on the right hand side, right aligned I want the word 'Next' followed by my right arrow. EASY PEASY I thought.

Well it has taken me an hour to realise that I have to set my parent element to position: relative for the left middle and right elements to use absolute without going to the very top of the page. so at least I now have them along in a line.

What I have found is that the the text on the left and right is vertically aligned to the BOTTOM edge of the image and the text in the middle has been vertically aligned to the TOP of the image despite all 4 css classes being defined as vertical-align: middle;

please tell me where I am going wrong, I'm loosing my marbles here!

--html:

Code:

	<div id="width-100">
		<div id="third-left">
			<img src="images/arrowleft.png" alt="foo"/>
			Previous
		</div>
		<div id="third-middle">
			Select a different draw
		</div>
		<div id="third-right">
			Next
			<img src="images/arrowright.png" alt="foo"/>
		</div>
	</div>

--css:
Code:

#third-left {
	width: 30%;
	text-align: left;
	vertical-align: middle;
	}
	
#third-middle {
	position: absolute;
	top: 0px;
	margin: 0 35% 0 35%;
	width: 30%;
	vertical-align: middle;
	text-align: center;
	}

#third-right {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 30%;
	text-align: right;
	vertical-align: middle;
	}

#width-100 {
	width: 100%;
	position: relative;
	vertical-align: middle;
	background: white;
	}

any thoughts?

Thanks,
Ben

Hi there,

I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work.

How can I center them vertically?

Thanks!

I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div?

Code:

echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">';
echo '<h1 >1/35 Scale House</h1>';
echo '</div>';

Hi,

Just upgraded my monitor and am now operating on a 1280*1024 resolution. Previous website I have built have been for 1024*768 resolutions.

Problem is now that some of my images are placed at the top of the screen when I want them in the middle... not with a load of blank space beneath them. I want the blank space equally around them.

Anyway, I'm specifically talking about the website I have: http://www.atari-music.co.uk

The front and home-pages suffer from this problem when viewed on > 1024*768 resolutions. I have attempted to fix the problem (though it is not in the code for the on-line version) by putting this into the style sheet:-

IMG.middle {
vertical-align: middle;
}

In the HTML for the image map I have:-

<IMG class="middle" src="images/home.jpg" height="570" width="760" alt="ATARI - The Official Website" border="0" usemap="#siteMap"/>

Am I not referencing the CSS code correctly? The image is still sitting, vertically aligned to the top.


Cheers,

Rob.