Блог

Главная - Вопросы по программированию - не выравнивается по центру контейнера

не выравнивается по центру контейнера

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

и все они находятся внутри одного контейнера. Я использовал align-items-center, чтобы выровнять их все в одной строке внутри контейнера. Однако это свойство не применяется к

тег. Чего я не понимаю? Я хочу, чтобы «или» было выровнено с кнопкой регистрации и входа в систему.

 nav ul{
    padding: 0;
    display: flex;
    margin-bottom: 0;
}
nav li{
    list-style: none;
    padding: 0 0.2em;
}
nav a{
    text-decoration: none;
}
#login{
    display: inline-block;
    min-width: max-content;
    max-height: min-content;
    margin: 0;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
            <div class="container d-flex align-items-center justify-content-between ">
                <div class="container d-flex align-items-center ">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                <div class="container-flex d-flex align-items-center">
                    <a href="#" style="white-space: nowrap">Sign up</a>
                    <p style="padding-right: 0.5em; padding-left: 0.5em;"> or </p>
                    <button class="btn btn-success btn-md" id="login">Log in</button>
                </div>
            </div>
        </nav>

Комментарии:

1. <p style=»отступ справа: 0,5 em; отступ слева: 0,5em; margin-bottom: 0;»>

Ответ №1:

Абзацы Bootstrap 4 <p> имеют нижнее поле. Используйте mb-0 класс, чтобы удалить это.

 <p style="padding-right: 0.5em; padding-left: 0.5em;" class="my-0"> or </p>

https://www.codeply.com/go/n337ATFcOh

Вы могли бы значительно упростить разметку и CSS, используя панель навигации начальной загрузки. Также нет причин использовать вложенные контейнеры.

https://www.codeply.com/go/ZiTM3iuHrd

Ответ №2:

У вас есть поле, равное элементу p. Просто удалите его, и все готово:

 nav ul{
    padding: 0;
    display: flex;
    margin-bottom: 0;
}
nav li{
    list-style: none;
    padding: 0 0.2em;
}
nav a{
    text-decoration: none;
}
#login{
    display: inline-block;
    min-width: max-content;
    max-height: min-content;
    margin: 0;
}

nav p {
  margin: 0;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
            <div class="container d-flex align-items-center justify-content-between ">
                <div class="container d-flex align-items-center ">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                <div class="container-flex d-flex align-items-center">
                    <a href="#" style="white-space: nowrap">Sign up</a>
                    <p style="padding-right: 0.5em; padding-left: 0.5em;"> or </p>
                    <button class="btn btn-success btn-md" id="login">Log in</button>
                </div>
            </div>
        </nav>

Ответ №3:

вы также используете margin-bottom:0

или

Ответ №4:

 .mb-0{margin-bottom:0px;}  
 <p style="padding-right: 0.5em; padding-left: 0.5em;" class="mb-0"> or </p>

Ответ №5:

добавьте margin-top в тег p, как показано ниже:

  nav ul{
        padding: 0;
        display: flex;
        margin-bottom: 0;
    }
    nav li{
        list-style: none;
        padding: 0 0.2em;
    }
    nav a{
        text-decoration: none;
    }
    #login{
        display: inline-block;
        min-width: max-content;
        max-height: min-content;
        margin: 0;
    }  
     
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
            <div class="container d-flex align-items-center justify-content-between ">
                <div class="container d-flex align-items-center ">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                <div class="container-flex d-flex align-items-center">
                    <a href="#" style="white-space: nowrap">Sign up</a>
                    <p style="padding-right: 0.5em; padding-left: 0.5em; margin-top: 15px;"> or </p>
                    <button class="btn btn-success btn-md" id="login">Log in</button>
                </div>
            </div>
        </nav>

Ответ №6:

Ответы на самом деле не являются объяснениями того, почему это происходит.

Все теги имеют стиль по умолчанию в браузере. Вы можете посмотреть на них здесьhttps://www.w3schools.com/cssref/css_default_values.asp .

Таким образом, <p> имеет стиль по умолчанию margin-top: 1em; margin-bottom: 1em; . Чтобы удалить это, установите для margin-top и margin-bottom значение 0 . Вы можете сделать это с помощью класса my-0 . 

 lesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
            <div class="container d-flex align-items-center justify-content-between ">
                <div class="container d-flex align-items-center ">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                <div class="container-flex d-flex align-items-center">
                    <a href="#" style="white-space: nowrap">Sign up</a>
                    <p style="padding-right: 0.5em; padding-left: 0.5em;" class="my-0"> or </p>
                    <button class="btn btn-success btn-md" id="login">Log in</button>
                </div>
            </div>
        </nav>