Question

这是我的头脑。我无法让我的文字在我的页脚中垂直对齐。基本文本是我想要它在中间的位置，但登录的链接最终位于页脚的顶部。此外，当我登录并显示其他选项时，页脚右侧的文本不会显示。请帮忙。

页脚代码：

    <?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;
}

希望一切都有道理。我正在努力使用PHP类型的东西。

Answer 1

在这里，我使用了演示页脚链接并粘贴整个html和CSS。您刚刚更改了css类页脚

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

/ *页脚高度的负值* /

这些并添加#login li block

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

这三个属性，希望能解决您的问题。此外，我附上了我的演示菜单预览图像，你可以看到它是对还是错。

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>

如何在div中垂直对齐文本

1 个答案: