homepage Welcome to WebmasterWorld Guest from 54.146.190.193
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Equivalent to Valign?
toddbg

10+ Year Member



 
Msg#: 1011 posted 6:38 pm on May 8, 2003 (gmt 0)

I have a div that spans 720px and is 59px high, I have a image that is left aligned and 59x59, I then have a text piece "Website Name" that I want to be set to 9px from the right edge of the image and centered in the div height wise.

In a table I would have just set the v-align, but that does not seem to be working for this.

I am stuck. :) probably need more caffiene.

Can someone point me in the right direction to get this set up the way I want?

Thanks!
--
T

 

mavherick

10+ Year Member



 
Msg#: 1011 posted 7:05 pm on May 8, 2003 (gmt 0)

You could set vertical-align: middle; to your div, but read this thread before as it points some issues (others might suggest an easier way):

Vertical-Align: Browser Support? [webmasterworld.com]

mavherick

MWpro

10+ Year Member



 
Msg#: 1011 posted 7:56 pm on May 8, 2003 (gmt 0)

Since you know the height of the div that it will be in (59px), you could probably just wrap the text in another div and use margin to move it down. Here is the code I used to test this thought.

#container {
width: 100%;
height: 59px;
background-color: #CCC;
}
#text {
margin: 18px 0px 0px 0px;
}

<div id="container">
<div id="text">
Text here
</div>
</div>

I got the 18px by doing 59/2 - an estimation of the font size (if it is fixed (px) you can just use that value). So 59/2 - 12 = 17.5, round up to 18. This would really only work for a fixed layout though...

lowlander

10+ Year Member



 
Msg#: 1011 posted 12:07 pm on May 9, 2003 (gmt 0)

<style type="text/css">
<!--
#div1 {border:1px solid #000; width:720px;}
#img1 {margin-right:9px; vertical-align:middle;}
-->
</style>

<body>
<div id="div1">
<img id="img1" alt="" src="anImage.gif" height="59" width="59" /><span>Website Name</span>
</div>
</body>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved