Question

尝试创建基本标头但遇到了user_login元素中定位文本的问题。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="home_style.css">
    </head>
    <body>
        <div class="header">
        <div class="search_bar">
        <input type="text" name="search" placeholder="Search magical instruments, tricks, books and more">
            </div>
            <div class="user_settings">
                <a href="settings.html"><img src="onebit_09.png" width="24px" height="24px"></a>
            </div>
            <div class="user_login">
                <p class="login_properties">Test</p>
            </div>
        </div>
    </body>
</html>

的CSS：

html,body {
    height     : 100%;
    min-height : 100%; 
    width      : 100%
    min-width  : 100%;
    margin     : 0;
    padding    : 0;
}

.header {
    margin-top       : 0;   
    margin-bottom    : 0;
    height           : 10%; 
    width            : 100%;
    background-color : #343430;
}

.search_bar input[type="text"] {
    position            : absolute; 
    left                : 20%;
    top                 : 5%;
    width               : 27%;
    height              : 2.75%;
    padding             : 5px;
    padding-right       : 50px;
    outline             : none;
    border              : 2px solid #9C4B8F;
    border-radius       : 5px;
    background-color    : #FBFBFB;  
    font-family         : Cambria, Cochin, Georgia, serif;
    font-size           : 16px;
    color               : grey;
    background-image    : url('search.png');
    background-position : 100% -10px;
    background-repeat   : no-repeat;
    margin-top          : -1.375%;
}

.search_bar input[type="text"]:focus {
    background-color : #FFFFFF;
    border-color     : #333333;
}

.user_login {
    position         : absolute;
    left             : 70%;
    top              : 5%;
    width            : 5%;
    height           : 2.75%;
    padding          : 5px;
    margin           : -1.375% 0 0 -2.5%;
    color            : white;
    background-color : #9C4B8F;
    border-radius    : 5px;
}

p.login_properties {
    position : absolute;
    height   : 50%;
    width    : 75%;
    top      : 0px;
}

.user_settings img {
    position : absolute;
    top      : 5%;
    left     : 95%;
    height   : 48px;
    width    : 48px;
    margin   : -24px 0 0 -24px;
}

为什么登录属性中的top 0px将文本'Test'定位在user_login元素的中间位置？看来我错误地把元素的顶部放在了某个地方的中间位置，请帮忙

Answer 1

这是因为p元素的默认边距。

顶部0px定位在html / css中的元素中间？

1 个答案: