不能在 div 中垂直居中多个 div,并且不能在其中垂直居中它们的元素
Cannot vertically center multiple divs within a div, and vertically center their elements within them
我是 HTML/CSS 的新手,正在努力理解其中涉及的很多概念。我正在尝试将 2 divs 在较大的 div 中垂直居中,并将这些 divs 中的元素居中。
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="MainDiv">
<div id="SubDiv">
<form method="POST">
<input type="text" name="example1" class="Text">
<input type="text" name="example2" class="Text">
<input type="submit" value="Go"> <br>
</form> <br/>
</div>
<div id="SubDiv">
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
</div>
</div>
</body>
CSS:
#MainDiv
{
width: 60%;
height: 30%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
border: 1px solid black;
}
#SubDiv
{
width: 90%;
height: 45;
margin: auto;
border: 1px solid black;
}
.Text
{
width: 40%;
}
当然,我已经进行了大量搜索以试图修复此问题,但任何修复似乎都无济于事,或者把事情搞得更糟。如有任何帮助,我们将不胜感激。
与水平居中相比,垂直居中有点困难。
为此,我在您的 Subdivs 元素上设置了一个容器并设置了一个 ID SubDivContainer
。然后为该容器设置样式,使其垂直居中。
#SubDivContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
合计:
#MainDiv
{
width: 60%;
height: 120px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
border: 1px solid black;
}
#SubDivContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
#SubDiv
{
width: 90%;
height: 45;
margin: auto;
border: 1px solid black;
}
.Text
{
width: 40%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="MainDiv">
<div id="SubDivContainer">
<div id="SubDiv">
<form method="POST">
<input type="text" name="example1" class="Text">
<input type="text" name="example2" class="Text">
<input type="submit" value="Go"> <br>
</form> <br/>
</div>
<div id="SubDiv">
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
</div>
</div>
</div>
</body>
</html>
您可能需要为此考虑 flexbox,它内置了垂直居中
这里是对 flexbox 的精彩介绍:
http://flexboxin5.com/
这是一种方法。
我将 2 个内部 div 包裹在 1 个 div 容器中并将其居中。
内部 div 内的所有元素与行高 属性 设置为 div 的高度对齐,我删除了 BR 元素。
body, html{height: 100%}
.mainDiv
{
width: 60%;
height: 30%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
border: 1px solid black;
}
.mainDiv>div{
height: 90px;
width: 90%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mainDiv>div>div{
width: 100%;
height: 50%;
border: 1px solid black;
line-height: 45px;
}
.mainDiv input[type=text]{
width: 40%;
}
<html>
<body>
<div id="MainDiv" class="mainDiv">
<div>
<div>
<form method="POST">
<input type="text" name="example1">
<input type="text" name="example2">
<input type="submit" value="Go">
</form>
</div>
<div>
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
</div>
</div>
</div>
</body>
</html>
我是 HTML/CSS 的新手,正在努力理解其中涉及的很多概念。我正在尝试将 2 divs 在较大的 div 中垂直居中,并将这些 divs 中的元素居中。
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="MainDiv">
<div id="SubDiv">
<form method="POST">
<input type="text" name="example1" class="Text">
<input type="text" name="example2" class="Text">
<input type="submit" value="Go"> <br>
</form> <br/>
</div>
<div id="SubDiv">
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
</div>
</div>
</body>
CSS:
#MainDiv
{
width: 60%;
height: 30%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
border: 1px solid black;
}
#SubDiv
{
width: 90%;
height: 45;
margin: auto;
border: 1px solid black;
}
.Text
{
width: 40%;
}
当然,我已经进行了大量搜索以试图修复此问题,但任何修复似乎都无济于事,或者把事情搞得更糟。如有任何帮助,我们将不胜感激。
与水平居中相比,垂直居中有点困难。
为此,我在您的 Subdivs 元素上设置了一个容器并设置了一个 ID SubDivContainer
。然后为该容器设置样式,使其垂直居中。
#SubDivContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
合计:
#MainDiv
{
width: 60%;
height: 120px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
border: 1px solid black;
}
#SubDivContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
#SubDiv
{
width: 90%;
height: 45;
margin: auto;
border: 1px solid black;
}
.Text
{
width: 40%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="MainDiv">
<div id="SubDivContainer">
<div id="SubDiv">
<form method="POST">
<input type="text" name="example1" class="Text">
<input type="text" name="example2" class="Text">
<input type="submit" value="Go"> <br>
</form> <br/>
</div>
<div id="SubDiv">
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
</div>
</div>
</div>
</body>
</html>
您可能需要为此考虑 flexbox,它内置了垂直居中
这里是对 flexbox 的精彩介绍: http://flexboxin5.com/
这是一种方法。 我将 2 个内部 div 包裹在 1 个 div 容器中并将其居中。 内部 div 内的所有元素与行高 属性 设置为 div 的高度对齐,我删除了 BR 元素。
body, html{height: 100%}
.mainDiv
{
width: 60%;
height: 30%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
border: 1px solid black;
}
.mainDiv>div{
height: 90px;
width: 90%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mainDiv>div>div{
width: 100%;
height: 50%;
border: 1px solid black;
line-height: 45px;
}
.mainDiv input[type=text]{
width: 40%;
}
<html>
<body>
<div id="MainDiv" class="mainDiv">
<div>
<div>
<form method="POST">
<input type="text" name="example1">
<input type="text" name="example2">
<input type="submit" value="Go">
</form>
</div>
<div>
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
</div>
</div>
</div>
</body>
</html>