How can I vertically align text in my div

Question

This is doing my head in. I can't get my text to align vertically in my footer. The basic text is where I want it in the middle but the links to log in end up at the top of the footer. Also when I log in and have my other options display the text on the right of the footer doesn't display. Please help.

Footer code:

    <?php
        include ("Includes/closeDB.php");
    ?>
        <footer>
            <div class="footer-wrapper"></div>
            <div class="footer-wrapper">
                <div class="float-left"><p id="social">Site Map</p></div>
                <div id="login">
                            <?php
                                if (logged_on())
                        {
                            echo '<li><a href="/logoff.php">Sign out</a></li>' . "\n";
                            echo '<li><a href="/addpage.php">Add</a></li>' . "\n";
                            echo '<li><a href="/selectpagetoedit.php">Edit</a></li>' . "\n";
                            echo '<li><a href="/deletepage.php">Delete</a></li>' . "\n";
                            if (is_admin())
                            {

                            }
                        }
                        else
                        {
                            echo '<li><a href="/logon.php">Admin Log In</a></li>' . "\n";
                        }
                        ?>

                        <?php if (logged_on()) {
                            echo "<div class=\"welcomeMessage\">Welcome, <strong>{$_SESSION['username']}</strong></div>\n";
                        } ?>
                </div>

                <div class="float-right"><p id="social">&copy; Swing and Putt 2014</p></div>
            </div>
        </footer>
    </body>
</html>

CSS:

.float-left {
float: left;
color: #000000;
text-align: left;
padding-left: 10px;
}

.float-right {
float: right;
color: #000000;
text-align: right;
padding-right: 10px;
}

footer {
clear: both;
font-size: 12pt;
height: 30px;
margin-top: -30px; /* negative value of footer height */
position: relative;
background-color: #00BFFF;
padding: 5px;
}    

footer .footer-wrapper {
}

/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: 12pt;
font-family: Arial;
float: left; 
}

#login a {
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}

#login a.username {
background: none;
margin-left: 0px;
text-decoration: underline;
}

#login ul {
margin: 0;
}

#login li {
display: inline;
list-style: none;
}

Hope that all makes sense. I'm struggling with PHP type stuff.

Can you post the output instead of the PHP code? The problem here is styling and with the generated HTML, people can experiment and change it as well. — GolezTrol, Apr 20 '14 at 05:24
possible duplicate of [Vertically Align text in a Div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) — akash, Apr 20 '14 at 05:25

score 0 · Accepted Answer · answered Apr 20 '14 at 06:20

Here i have use demo footer links and paste whole html and css. You have just change your css class footer

height: 180px;
margin-top: 0px;

/* negative value of footer height */

these and add #login li block

float: left;
clear: both;
margin-bottom: 10px;

these three property and hope that solve your problem. Also i have attach my demo menu preview image you can see that is it right or wrong.

enter image description here

<html>
<head>
    <title>Demo Title</title>
    <style type="text/css">
        .float-left {
            float: left;
            color: #000000;
            text-align: left;
            padding-left: 10px;
        }

        .float-right {
            float: right;
            color: #000000;
            text-align: right;
            padding-right: 10px;
        }

        footer {
            clear: both;
            font-size: 12pt;
            height: 180px;
            margin-top: 0px; /* negative value of footer height */
            position: relative;
            background-color: #00BFFF;
            padding: 5px;
        }

        footer .footer-wrapper {
        }

        /* login
        ----------------------------------------------------------*/
        #login {
            display: block;
            font-size: 12pt;
            font-family: Arial;
            float: left;
        }

        #login a {
            margin-left: 10px;
            margin-right: 3px;
            padding: 2px 3px;
            text-decoration: none;
        }

        #login a.username {
            background: none;
            margin-left: 0px;
            text-decoration: underline;
        }

        #login ul {
            margin: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            float: left;
            clear: both;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<footer>
    <div class="footer-wrapper"></div>
    <div class="footer-wrapper">
        <div class="float-left"><p id="social">Site Map</p></div>
        <div id="login">
            <ul>
            <li><a href="/logoff.php">Sign out</a></li>
            <li><a href="/addpage.php">Add</a></li>
            <li><a href="/selectpagetoedit.php">Edit</a></li>
            <li><a href="/deletepage.php">Delete</a></li>
            <li><a href="/logon.php">Admin Log In</a></li>
            </ul>
    </div>

    <div class="float-right"><p id="social">&copy; Swing and Putt 2014</p></div>
    </div>
</footer>
</body>
</html>

How can I vertically align text in my div

1 Answers1