我正在尝试将我的无序列表居中放置在侧边栏中,但是以下应用于我的CSS的解决方案均无效:
align-items: center;
vertical-align: middle;
transform: translateY(-50%);
top: 0;
bottom: 0;
我在这一点上感觉很困,不胜感激。这是我的SCSS和HTML:
$font-primary: "Roboto", sans-serif;
$body-bg: rgb(240, 230, 230);
$sidebar-bg: rgb(255, 210, 235);
$text: black;
$shadow: 0px 0px 100px 0px rgb(207, 207, 207);
body {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed */
background-color: $body-bg;
color: $text;
}
#sidebar {
background-color: $sidebar-bg;
min-width: 300px;
max-width: 300px;
min-height: 100vh;
-moz-box-shadow: $shadow; /*hor-length shadodow-start-point shadow-depth darkness */
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
* {
text-align: center;
}
ul {
padding: 0px;
margin: 0px;
}
li {
text-decoration: none;
list-style: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--Makes mobile viewing good-->
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="d-flex">
<nav id="sidebar">
<h1 class="display-3 pt-4 pb-4">DRIP</h1>
<ul>
<li>Finances</li>
<li>Development</li>
<li>DIY</li>
</ul>
</nav>
</div>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<!-- jQuery, Popper, Bootstrapper JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
我的目标是使列表相对于其所在的侧边栏居中居中(如果可以的话)。即使在UL项目之间添加填充等样式或添加更多UL项目时,我也希望它在侧边栏中保持居中。遗憾的是,我的解决方案都没有影响我希望他们使用的列表。
在边栏的内容周围放置div
。将侧栏设为flexbox,然后将项目(新创建的div)垂直居中对齐。
* {
text-align: center;
}
#sidebar {
min-width: 300px;
max-width: 300px;
min-height: 100vh;
display: flex;
align-items: center;
background-color: lightblue;
}
ul {
padding: 0px;
margin: 0px;
}
li {
text-decoration: none;
list-style: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="d-flex">
<nav id="sidebar">
<div>
<h1 class="display-3 pt-4 pb-4">DRIP</h1>
<ul>
<li>Finances</li>
<li>Development</li>
<li>DIY</li>
</ul>
</div>
</nav>
</div>