#css #twitter-bootstrap #bootstrap-4
#css #twitter-bootstrap #bootstrap-4
Вопрос:
я работал над некоторым кодом, но когда я попробовал center
<hr>
использовать align
атрибут, он не мог не center
отбросить себя влево. Вот пример кода.
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1{
font-size: 3rem;
color: #e2dbdb;
}
hr{
border-radius: 5px;
max-width: 65px;
align-items: center;
}
.buffer{
padding: 5rem;
}
.btn-xl{
padding: 0.7rem 0.8rem;
/*border-radius: 5px;*/
}
<body>
<div class="container d-flex align-items-center h-100 ">
<div class="row">
<header class="text-center col-12">
<h1>THE BEST START UP OF THE YEAR</h1>
</header>
<div class="col-12 buffer"></div>
<section class="text-center col-12">
<hr class="border border-primary">
<button class="btn btn-primary btn-xl">FIND OUT MORE</button>
</section>
</div>
</div>
</body>
Но когда я помещаю его в center
тег, он внезапно центрируется
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1 {
font-size: 3rem;
color: #e2dbdb;
}
hr {
border-radius: 5px;
max-width: 65px;
align-items: center;
}
.buffer {
padding: 5rem;
}
.btn-xl {
padding: 0.7rem 0.8rem;
/*border-radius: 5px;*/
}
<body>
<div class="container d-flex align-items-center h-100 ">
<div class="row">
<header class="text-center col-12">
<h1>THE BEST START UP OF THE YEAR</h1>
</header>
<div class="col-12 buffer"></div>
<section class="text-center col-12">
<center>
<hr class="border border-primary">
</center>
<button class="btn btn-primary btn-xl">FIND OUT MORE</button>
</section>
</div>
</div>
</body>
так почему же выравнивание не работает на <hr>
Комментарии:
1. Учитывая ваши примеры, я не могу воспроизвести проблему. В обоих случаях hr охватывает всю ширину.
2. Какой браузер вы используете? В Firefox я вижу небольшой HR в середине страницы. Но это может зависеть от браузера. Попробуйте использовать
<div class="hr"></div>
этот стиль по мере необходимости3. Я использую Chrome 88. Тем не менее,
<center>
он устарел , вам следует избегать его использования.4. спасибо, ребята, я наконец-то понял это. я использовал bootsrap, чтобы центрировать его. и йошилу спасибо за то, что попал в <центр>.