调整浏览器大小时，如何使部分中的对象保持居中？
Posted
技术标签:
【中文标题】调整浏览器大小时，如何使部分中的对象保持居中？【英文标题】：How do I keep objects in sections centered when the browser is resized? 【发布时间】：2020-06-26 09:06:26 【问题描述】：我正在创建一个分为 2 列的网站：左列是菜单，右列是滑块。我在部分中以 <div> 为中心时遇到了一些问题。
我希望当我调整浏览器大小时，我的对象完全居中，因为目前当我调整浏览器大小时，菜单中的最新项目不会保持原位。即使我移除了滑块，也会发生这种情况。
当我调整浏览器大小时，如何确保我的对象完全居中？
这是截图：
*
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
html,
body
height: 100%;
/* needed to be able to use 100% height in the columns */
overflow: hidden;
body
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
.column
height: 100%;
float: left;
.c20
width: 20%;
background-color: yellow;
.c80
width: 80%;
background-color: red;
header
height: 20%;
section
height: 60%;
footer
height: 20%;
header,
footer
background-color: rgba(200, 200, 200, 0.5);
section,
header,
footer
padding: 10px;
/* Menu */
.vertical-menu
width: 100%;
/* Set a width if you like */
height: 100%;
position: static;
.vertical-menu a
color: black;
/* Black text color */
display: block;
/* Make the links appear below each other */
padding: 15px 0;
/* Add some padding */
text-decoration: none;
/* Remove underline from links */
text-align: center;
width: 100%;
.vertical-menu a:hover
background-color: ;
/* Dark grey background on mouse-over */
.image-slider
position: relative;
width: %;
margin: 0 auto;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simone Livraghi Photographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="column c20">
<header>Header c20</header>
<section>
<div class="vertical-menu">
<a href="#">Logo</a>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</section>
<footer>Footer c20</footer>
</div>
<div class="column c80">
<header>Header c80</header>
<section>
</section>
<footer>Footer c80</footer>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：你应该给侧边菜单栏一个固定宽度，在某个断点它会放错地方，但现在它在调整大小后也显示在完美位置
【讨论】：
【参考方案2】：也许将margin:auto 添加到垂直菜单中的每个项目会有所帮助：
.vertical-menu a
color: black;
display: block;
padding: 15px 0;
text-decoration: none;
text-align: center;
width: 100%;
margin: auto;
【讨论】：
以上是关于调整浏览器大小时，如何使部分中的对象保持居中？的主要内容，如果未能解决你的问题，请参考以下文章