Jump to content

Recommended Posts

I assume you mean with the word THIS

the span element inside the Div element?

 

You probably would have found the solution if you would have just searched the forum with the key words vertical align

 

anyway: the height of your div is 3em

 

if you set the line-height of the span to 3em also it will be vertical aligned.

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1247078
Share on other sites

than your doing it wrong! Also If something isn't working although someone suggested something, place the code where you tried to implement the code. Much more useful.

 

example:

 

<!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>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #wrapper{background:#f4a; height:3em;}
            #wrapper span{line-height:3em; }
        </style>
    </head>
    <body>
       <div id="wrapper">
           <span>Hello World!</span>
        </div>
    </body>
</html>

 

-EDIT: keep in mind this only works for single line content (line-height)

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1247083
Share on other sites

so what's the difference between my code, and yours?:

 

<div style="background-image:url(../Images/gradiant_nav_headers.png); background-repeat:repeat-x; height:3em; width:99%; margin-left:auto; margin-right:auto;"><span style="font-weight:bolder; padding-left:15px; font-size:18px; line-height:3em; vertical-align:middle;">New Attractions :: Coming Soon!!</span></div>

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1247086
Share on other sites

Well, the difference is obvious, you use other styles.

 

for instance a font-size in pixels and you combine that with em for the height.

 

use em for you font

 

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            #wrapper{background:#f4a; height:3em;}
            #wrapper span{line-height:3em;vertical-align: middle;}
        </style>
    </head>
    <body>
       <div id="wrapper">
           <span>Hello World!</span>
        </div>
        <div style="background:yellow;background-image:url(../Images/gradiant_nav_headers.png); background-repeat:repeat-x; height:3em; width:99%; margin-left:auto; margin-right:auto;"><span style="font-weight:bolder; padding-left:15px; font-size:1em; line-height:3em;">New Attractions :: Coming Soon!!</span></div>
    </body>
</html>

 

 

edit: btw it might be good to know that the em is calculated  based on the font size of the parent element. So in this case you better set a font-size for the div so the span inherits it. that way you can increase the value of the font-size.

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1247088
Share on other sites

lol you are clearly missing the point. Your topic is about vertical alignment. You have a background image which i don't have. SO in order to see if something is vertical aligned i have to put some background in it to actually see it. SO yes you can take it out..

 

Just keep in mind the em is a relative measurement...

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1247091
Share on other sites

Oh a small thing i found in my code The line height property needs to be set to the div, not the span, to make it easier to adjust the font-size in the span when using em. Seems i can't watch movies and code :P

 

 

so as for logic it should be like this:

 

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            body{font-size:100%;font-size:1em;} 
            #wrapper{line-height:3em;background:#f4a; height:3em;font-size:1.2em;}
        </style>
    </head>
    <body>
       <div id="wrapper">
           <span>Hello World!</span>
        </div>       
    </body>
</html>

 

 

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1247097
Share on other sites

ok, so i removed the background color, as well as the line-height for the span, and the second image is what i get.

 

and i thought that ems is the better way since you see exactly how big something will be across the board?  i heard that pixels isn't very reliable, so i try to use em's more... am i wrong to be doing so?

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1248228
Share on other sites

PLease for the sake of simplicity, Post the complete code you used. or link to an online example. Images don't tell anyone here anything.

The Code i provide works as is, use it as is play with it and see why it works.

So just to repeat myself. I gave some code run that as is, and play with it. If you have troubles with code. POST the complete code you used or link to an online example.

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1248235
Share on other sites

sorry--here is my code:

 

<div style="background:yellow;background-image:url(../Images/gradiant_nav_headers.png); background-repeat:repeat-x; height:3em; width:99%; margin-left:auto; margin-right:auto;"><span style="font-weight:bolder; padding-left:15px; font-size:1em; line-height:3em;">New Attractions :: Coming Soon!!</span></div>

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1248267
Share on other sites

First of all that is not your complete code, second.

If you run only that single line the span is working as intended being  vertical aligned.

The fact that it might not work for you is because there are other style declaration interfering hence the name CASCADING style sheet.

I have a feeling you do not see why it working or how css works at all. I can be polite and deny this. But i rather don't, because that won't help.

 

Sorry i can't help anymore. I hope someone else wants to give it a try, or you just read what has been written and apply and learn from it.

Link to comment
https://forums.phpfreaks.com/topic/242804-vertical-aligning/#findComment-1248480
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.