Выровнять кнопку внизу div с помощью CSS


105

Я хочу выровнять мою кнопку в правом нижнем углу моего div. Как я могу это сделать?

введите описание изображения здесь

Текущий css div:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

Ответы:


226

Вы можете использовать position:absolute;для абсолютного позиционирования элемента в родительском div. При использовании position:absolute;элемент будет позиционироваться абсолютно от первого позиционированного родительского div, если он не может найти его, он будет позиционироваться абсолютно из окна, поэтому вам нужно будет убедиться, что контентный div позиционируется.

Чтобы позиционировать div содержимого, все positionзначения, которые не являются статическими, будут работать, но relativeэто самый простой способ, поскольку он не меняет само позиционирование div .

Итак, добавьте position:relative;к содержимому div, удалите float с кнопки и добавьте к кнопке следующий css:

position: absolute;
right:    0;
bottom:   0;

1
@Harry Joy: Вы также применили position: relativeк элементу, содержащему вашу кнопку формы +?
30dot

1
@Harry Joy: Тогда это должно относиться к этому div, а не к странице. Если нижний колонтитул также содержится в этом div, возможно, они просто кажутся одним и тем же. Если вы знаете высоту нижнего колонтитула, на кнопке вы можете использовать bottom: HEIGHT_OF_FOOTERpx.
30dot

1
@Harry Joy: Тогда здесь слишком много путаницы. Вы должны опубликовать свой HTML / CSS как тестовый пример jsFiddle .
30dot

1
@thirtydot: Все заработало. Спасибо. неверно размещено положение: относительное. Добавил не в тот div.
Гарри Джой

3
На самом деле мне просто нужно сделать комментарий и действительно указать, как я счастлив, что нашел это решение. Это меня беспокоит годами!
К. Килиан Линдберг,

33

CSS3 flexbox также можно использовать для выравнивания кнопки внизу родительского элемента.

Обязательный HTML:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

Необходимый CSS:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Скриншот:

Выходное изображение

Полезные ресурсы:


12

Родительский контейнер должен иметь следующее:

position: relative;

Сама кнопка должна иметь это:

position: relative;
bottom: 20px;
right: 20px;

или что угодно


Обратите внимание, что это неверный ответ. С position:relativeпомощью кнопки будет перемещена из исходного положения, а не на основе родителя.
Kokos

1
Вам нужно использовать position: absoluteдля этого снизу-справа.
CaptainBli

-25

Идет вправо и может использоваться таким же образом для левой

.yourComponent
{
   float: right;
   bottom: 0;
}

3
Это только выравнивает вашу кнопку по правому краю. Не в правом нижнем углу.
Рубен
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.