使类元素居中

请帮帮我……我不知道它为什么这么做，但我找不到为什么不起作用。我认为这与使用过的库有关，但老实说，我不知道是什么原因导致了这个问题。

哦，问题是(几乎忘了说我不能解决的是什么(：如果你打开它，你可以看到下拉列表没有居中。但是，它应该是。问题是：为什么它不以中心为中心？我尝试了不同的东西，比如标准的"；边距：0自动"和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>

在这种特殊情况下，将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>

我不能只用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>

相关内容

最新更新

热门标签：