Как правильно выровнять то, что изменяет размеры в определенном месте

Question

Как правильно выровнять то, что изменяет размеры в определенном месте

0

Хорошо, что я работаю над веб-страницей, и когда вы пытаетесь заполнить форму для входа или зарегистрироваться, у нее появляется сообщение, если что-то пойдет не так... Или правильно. И я хотел бы, чтобы это было в центре планеты. Это Div. Также отметить, что изображение планеты имеет текст как часть этого снизу, поэтому использование изображения для центральной ссылки не может быть и речи. Я просто хочу знать, как я могу Установить среднюю точку, чтобы всегда быть одинаковой, поэтому, когда возникает более одной ошибки/сообщения, она не будет находиться в центре, и она будет выглядеть красиво, поскольку она растет с каждым добавленным сообщением. Я не раскрываю имя сайта по личным причинам.

Изображение:

(Извините за качество картофеля)

CSS:

#banner{  
    width: 800px;  
    margin-left: -400px;  
    left:50%;  
    top: 100px;  
    margin-bottom: 20px;  
    font-size: 15px;  
    font-weight: bold;  
    color:rgb(255,255,255);  
    text-align: center;  
    line-height: 30px;  
    border-radius: 15px;  
    position: absolute;  
}

Html и Php:

<?php 
if (empty($_SESSION['errors']) === false) {
    echo '<div id="banner" style="background-color:rgb(120,0,0);">';
    output_errors($_SESSION['errors']);
    echo '</div>';
    $_SESSION['errors'] = NULL;
}

if (empty($_SESSION['message']) === false) {
    echo '<div id="banner" style="background-color:rgb(0,100,0);">';
    output_errors($_SESSION['message']);
    echo '</div>';
    $_SESSION['message'] = NULL;
}
?>

Функция output_errors просто превращает массив в строку и эхо файл.

Darkaaja 19 сен. 2013, в 23:35

Источник

Теги:

html

css

resize

alignment

center

2 ответа

0

Используйте Javascript или JQuery, чтобы получить высоту вашего элемента #banner (http://api.jquery.com/height/), а затем используйте результат, чтобы изменить верхнюю позицию вашего элемента.

Это предполагает, что ваше #banner-сообщение не будет больше некоторого значения, так как оно может оказаться в верхней части страницы.

senortim 19 сен. 2013, в 21:03

Ещё вопросы

SlightlyCuban · Accepted Answer · 2013-09-19T21-11-00.000Z

Похоже, вы хотите, чтобы ошибки были наложены 500px в их контейнере. Использование 1000px high div и display: table-cell:

HTML

<div id="table">
    <div id="cell">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
    </div>
</div>

CSS

#table {
    width: 100%;
    display: table;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1000px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}

И что-нибудь внутри #cell должно быть сосредоточено на 500px того, что содержит #table. Пример.