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

【问题标题】：top 0px positioning at middle of element in html/css?html / css中元素中间的顶部0px定位？
【发布时间】：2014-03-15 14:19:24
【问题描述】：

尝试创建基本标题，但在 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;
}

为什么登录属性中的顶部 0px 将文本“测试”定位在 user_login 元素的中间位置？好像我错误地将元素的顶部放在了中间，请帮忙

【问题讨论】：

因为
标签是块级元素。您可以在 css 中应用 display: inline 以将其更改为 inline-element。
请将其缩小到一个最小的例子。
@yalight 块元素有什么问题？它们也可以绝对定位...
元素的百分比高度是其容器高度的百分比。例如，搜索栏的高度是标题的 2.75% 是视口的 10%。如果视口为 800 像素，则搜索栏为 2.2 像素
修复定位错误的好方法是在所有元素周围设置边框。在css中添加*{border:solid 1px red;}

标签： html css

【解决方案1】：

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

【讨论】：