CSS - Center Image Vertically

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>		

Hi all,

I know there are certain tricks to vertically center texts or images in a div area.

And I have read somewhere there are plans to avoid current complexity compared with tables.

For example, provided I use same CSS...

Code:

div,table{
  width: 250px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
}

...we optain well vertically centered text in this table...

Code:

<table>
  <tr><td>this IS vertically centered</td></tr>
</table>

...but not in this div based one...

Code:

<div>this IS NOT vertically centered</div>

I ask, do you know an easy way to acomplish the same we get with tables?

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

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.

I am designing this page:

theticketsguide.com/sample

Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put

vertical-align:middle

for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding.

Thanks,

Brandon

Using CSS, is it possible to vertically align centrally text to an image as you can using tables?

A simple example using a table would be

<table border="0" width="100%">
<tr>
<td><img border="0" src="image.gif" width="609"height="115"></td>
<td valign="middle">Ray did this</td>
</tr>
</table>

Using CSS so far I've got...

<p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this>

The CSS for imglft is...

.imglft{
float: left;
margin-right: 30px;

}

I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work.

You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm

Ray

I need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it.

This is what I want it to look like image link

This is what does look like web page link

Here is the CSS css link

How can I get abosolute vertical placement of the text best for firefox and IE?

I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible.

Thanks!

Hi,

I am trying to achieve a layout which uses unordered lists.

Within the LI, there is an image and some text. The images are all different heights though.

The issue i'm having at the moment is how can I make the text vertically align within the LI? Keep in mind that I can't put a height on as each image changes height. And these lists will be generated dynamically probably - so I don't really want to specify individual heights for each one... To make it even more difficult, the text may end up spanning onto two lines at some stage if i have to enter a larger description - so that also needs to be kept in mind.

I've been looking around all morning for examples of how to do this and I can't find anything - so any help would be greatly appreciated!!!

Here is what I'm trying to achieve:
http://www.joshsphotos.com/user_interface/final_look.gif

Here is the HTML at present:
http://www.joshsphotos.com/user_interface/

And the CSS:
http://www.joshsphotos.com/user_interface/css/style.css

Thanks!

Hi Guys,

I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image.

Here's what I have so far.


img.top {vertical-align:text-top;}

<a href="http://company.com/graphics/thumb.jpg">
<img class="top" src="http://company.com/graphics/thumb.jpg">
</a>
<a href="company.com">sample text</a>
<a href="company.com">second line</a>


Any ideas? I've tried like every switch for the vertical-align property...

I know there has to be an easy answer to this question but I'm at a loss!

How do I center an image using CSS?

Thanks!
BB

I've checked the class, and it's peachy, I've added a style= "margin: 0 auto;" tag, a style="text-align: center;" tag.

I've tried everything I can think of.

The image isn't receiving any parent styling that is holding it back from centering that I am aware of.

Will somebody please learn me!

URL is :
www . dalcon .com / business / skype-for-asterisk/

the image I'm referring to is the skype for asterisk image.

Sorry about broken link, I don't have the rep around here to not be considered a spammer yet I guess (it won't let me post a link)

I have used an image file "picture.PNG" like this :

<h1><img src="picture.PNG" /></h1>

then the css is

h1{
text-align: center;
margin: 20px;
padding: 10px;
height: 100px;
}

But it will not align the image in the center ?

Am i going about this the wrong way ? or is it just a syntax error ?

Hi all,

This is probably simple, but I can't get it working for some reason.

At http://www.bartlett-family.net/chri...ett/index2.html I want the 8 image links below the "Quote of the moment" to be centered between the vertical lines.

I'd appreciate help.

CSS is here and the class in "centerinline".