#html #css #centering
#HTML #css #центрирование
Вопрос:
Пожалуйста, помогите мне… Я не знаю, почему он это делает, но я не могу найти ничего, почему это не работает. Я предполагаю, что это как-то связано с используемыми библиотеками, но, честно говоря, я не знаю, что вызывает проблему.
О, проблема (чуть не забыл сказать, что я не могу исправить): если вы откроете его, вы увидите, что выпадающий список не центрирован. Но так и должно быть. Вопрос в том, почему он не центрирован? Я пробовал разные вещи, такие как стандартный «margin: 0 auto;» и поиграл с flexbox, но без какого-либо успеха…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.btn.btn-secondary.dropdown-toggle {
background-color: #cacaca;
color: white;
padding: 16px;
margin-top: 5%;
font-size: 16px;
border:none;
width: 100%;
font-family: 'Noto Sans JP', sans-serif;
}
.dropdown {
position: relative;
text-align: center;
padding-bottom: 10%;
padding: 20px;
}
.dropdown-menu {
text-align: center!important;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
display: absolute;
width: 50%;
margin: 0 auto!important;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-item {
padding: 12px 16px!important;
}
.aktiv a{
text-decoration: underline #3555ff;
color: #3555ff!important;
}
</style>
<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">
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<div class="aktiv">
<a class="dropdown-item" href="#">Button 1</a>
</div>
<a class="dropdown-item" href="#">Button 2</a>
<a class="dropdown-item" href="#">Button 3</a>
<a class="dropdown-item" href="#">Button 4</a>
<a class="dropdown-item" href="#">Button 5</a>
<a class="dropdown-item" href="#">Button 6</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script></body>
</html> Комментарии:
1. Эта ссылка может вам помочь.
Ответ №1:
В этом конкретном случае transform: translate3d(50%, 109px, 0) !important; поможет добавление в .dropdown-menu правило CSS класса (и удаление поля).
Это перезапишет настройку, добавленную одним из ваших JS-скриптов по щелчку мыши — единственная важная настройка, которая изменяется, — это первый параметр translate3d , который должен составлять 50% для горизонтального центрирования. Остальное остается как было.
Но для «реального», долгосрочного решения вы должны изменить это значение в этом javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.btn.btn-secondary.dropdown-toggle {
background-color: #cacaca;
color: white;
padding: 16px;
margin-top: 5%;
font-size: 16px;
border:none;
width: 100%;
font-family: 'Noto Sans JP', sans-serif;
}
.dropdown {
position: relative;
text-align: center;
padding-bottom: 10%;
padding: 20px;
}
.dropdown-menu {
text-align: center!important;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
display: absolute;
width: 50%;
transform: translate3d(50%, 109px, 0) !important;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-item {
padding: 12px 16px!important;
}
.aktiv a{
text-decoration: underline #3555ff;
color: #3555ff!important;
}
</style>
<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">
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<div class="aktiv">
<a class="dropdown-item" href="#">Button 1</a>
</div>
<a class="dropdown-item" href="#">Button 2</a>
<a class="dropdown-item" href="#">Button 3</a>
<a class="dropdown-item" href="#">Button 4</a>
<a class="dropdown-item" href="#">Button 5</a>
<a class="dropdown-item" href="#">Button 6</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script></body>
</html> Комментарии:
1. Большое спасибо, я полностью пропустил это. Это помогло, по крайней мере, для моей цели, но мне тоже не кажется таким «чистым». 🙂 В любом случае, спасибо!
Ответ №2:
Я не смог сделать это только с помощью css и вместо этого создал небольшую функцию js.
Посмотрите и дайте мне знать
$('.dropdown').on('show.bs.dropdown', function () {
var menu = $(this).find(".dropdown-menu");
var item = $(this)
// position the menu in the center
menu.attr('style', function(i,s) { return (s || '') "margin-left:" ((item.outerWidth() / 2) - menu.width() / 2) "px !important;" });
}) .btn.btn-secondary.dropdown-toggle {
background-color: #cacaca;
color: white;
padding: 16px;
margin-top: 5%;
font-size: 16px;
border:none;
width: 100%;
font-family: 'Noto Sans JP', sans-serif;
}
.dropdown {
position: relative;
text-align: center;
padding-bottom: 10%;
padding: 20px;
}
.dropdown-menu {
text-align: center!important;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
display: absolute;
width: 50%;
margin: 0 auto!important;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-item {
padding: 12px 16px!important;
}
.aktiv a{
text-decoration: underline #3555ff;
color: #3555ff!important;
} <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">
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<div class="aktiv">
<a class="dropdown-item" href="#">Button 1</a>
</div>
<a class="dropdown-item" href="#">Button 2</a>
<a class="dropdown-item" href="#">Button 3</a>
<a class="dropdown-item" href="#">Button 4</a>
<a class="dropdown-item" href="#">Button 5</a>
<a class="dropdown-item" href="#">Button 6</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>