top 0px позиционирование в середине элемента в html / css?

0

Попытка создать базовый заголовок, но столкнулась с проблемами с позиционирующим текстом внутри элемента 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? Кажется, я ошибочно сделал верхнюю часть элемента посередине где-то, пожалуйста, помогите

  • 0
    Потому что тег <p> является элементом уровня блока. Вы можете применить display: inline в css, чтобы изменить его на inline-element.
  • 0
    Пожалуйста, сузьте его до минимального примера.
Показать ещё 4 комментария
Теги:

1 ответ

0

Это из-за поля по умолчанию элемента p.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню