您好，我是 html/css 新手，我想知道如何将 div 居中，以便当我切换到不同的显示器时，它们将保持在同一个位置。
目前的问题是，当我切换监视器时，标题会移动，因此它不会与下面的大 div 的边缘对齐。我希望当您切换显示器时，所有内容都按部分拉伸(stretch)到新显示器
This is what it looks like on one monitor This is what it looks like on second monitor 我希望标题标题与 div 框对齐，无论它显示在哪个显示器上。因此，它在一台显示器上的显示方式就是它在另一台显示器上的显示方式
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About</title>
<link rel="stylesheet" type="text/css" href="about.css">
<script> </script>
</head>
<body>
<div class="mainContainer">
<div class="header">
<div id="headerTopSection">
<div id="titleWordsWrapper">
<div id="titleHeaderTailored">Tailored
<div id="titleHeaderSystems">Systems</div>
</div>
</div>
<div id="productsAndInformationWrapper">
<div id="contactUs">Contact</div>
<div id="products">Products</div>
</div>
</div>
</div>
<div id="midSection">Need this to stay the same</div>
</div>
</body>
</html>
CSS
div{
border-style:solid;
border-width:1px;
border-color:white;
}
html{
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
}
body{
background-color: #252322;
}
.mainContainer{
margin-left:auto;
margin-right:auto;
width: auto;
height: 400px;
}
.header{
background-color: #252322;
font-family: arial, sans-serif;
height: 80px;
overflow: hidden;
padding-top: 19px;
}
#headerTopSection{
height: 80px;
width: auto: 0px;
}
#titleWordsWrapper{
width: 350px;
height: 50px;
float: left;
}
#titleHeaderTailored{
color: white;
font-size: 30px;
}
#titleHeaderSystems{
color: yellow;
display: inline-block;
font-size: 30px;
}
#productsAndInformationWrapper{
width: 350px;
height: 50px;
float: right;
}
#products{
float: right;
color: white;
font-size: 30px;
padding-right: 20px;
}
#contactUs{
float: right;
color: white;
font-size: 30px;
}
#midSection{
height: 200px;
width: 1000px;
background-color: #282625;
clear: left;
margin-left: auto;
margin-right: auto;
color: white;
}
最佳答案
您在#midSection上使用margin-left: auto;，因此它肯定会自动居中对齐。
要获得您想要的值，请修复
margin-left: 120px <---change value accordingly
关于html - 尝试将我的 div 居中，以便当我切换显示器时它们保持相同的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37357136/