Кнопка неправильно отцентрована во гибком контейнере

Я пытаюсь центрировать кнопку в контейнере с жидкостью со 100% высотой по вертикали и дать ей смещение от нижней части экрана. Я в значительной степени там, однако кнопка смещена слева и не правильно отцентрирована. См. пример в моем фрагменте кода.

Я не уверен, что мне здесь не хватает... как мне правильно центрировать кнопку по центру экрана?

В коде моего сайта у меня есть изображение в качестве фона в основном контейнере с жидкостью, поэтому у меня есть размер фона: обложка; и т. д. в моем css.

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    position: absolute;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
        integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
        <link href = "styles.css" rel = "stylesheet"/>
</head>
<body>

    <div class = "fluid-container main-div">
        <button type = "button" class = "btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

html css bootstrap-4 bootstrap-5

03.05.2022 11:07

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы должны реализовать выравнивание начальной загрузки вместо использования обычного css, попробуйте Flex-контейнеры. Смотрите мой пример ниже:

<button type = "button" class = "d-flex justify-content-center btn btn-primary">Primary</div>

Добавление d-flex justify-content-centerпо горизонтали выровняет ваш элемент. Чтобы выровнять элемент по вертикали, посмотрите на Вертикальное выравнивание

03.05.2022 11:17

Ответ принят как подходящий

добавлять

left: 50%;
transform: translateX(-50%);

к элементу .centered-button для центрирования.

эта ссылка является полным ответом для центрирования с позицией

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    position: absolute;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
    left: 50%;
    transform: translateX(-50%);
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
        integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
        <link href = "styles.css" rel = "stylesheet"/>
</head>
<body>

    <div class = "fluid-container main-div">
        <button type = "button" class = "btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

и вы можете использовать flex, чтобы сделать это просто.

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-button {
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
        integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
        <link href = "styles.css" rel = "stylesheet"/>
</head>
<body>

    <div class = "fluid-container main-div">
        <button type = "button" class = "btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

03.05.2022 11:20

.main-div {
    background-color: pink;
    min-height: 100vh;
    line-height:100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    vertical-align: middle;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
        integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
        <link href = "styles.css" rel = "stylesheet"/>
</head>
<body>

    <div class = "fluid-container main-div">
        <button type = "button" class = "btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

Существует много кода для поиска двух разных строк. Пожалуйста, редактировать в пояснении.

— 03.05.2022 16:50

03.05.2022 11:24

.main-div {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color: pink;
    min-height: 100vh;
    line-height:100vh;
    min-width: auto;
    position: relative;
}

.centered-button {
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
        integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
        <link href = "styles.css" rel = "stylesheet"/>
</head>
<body>

    <div class = "fluid-container main-div">
        <button type = "button" class = "btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

Ответы только на код не очень полезны в долгосрочной перспективе. Пожалуйста, рассмотрите редактироватьing, чтобы добавить объяснение того, что вы изменили.

— 03.05.2022 16:51

Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

— 03.05.2022 18:06

03.05.2022 12:28