Question

我知道确实存在垂直对齐的解决方案，但问题是有各种方法可以实现这一点，但我还没有找到一个处理灵活容器的方法。许多解决方案都围绕着一个固定的高度，因为我的身高始终是未知的，所以根本无法帮助我。

我想垂直对齐我的左浮动div中的元素，即 .about_container .welcome div块。我怎么能弄清楚这一点，并随意指出我在我的代码中可能使用的任何不良做法。

如果你想看看下面两个文件的输出是什么样的，我在底部添加了输出的屏幕截图。

我的HTML文件的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Maddness</title>
    <link rel="stylesheet" type="text/css" href="floatHelp.css">
</head>
<body>
         <div class="about_container">
            <div class="welcome">
               <h1>Welcome<br>to my<br>Webpage!</h1>
            </div>
            <div class="welcome_content">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p>
            </div>
         </div>
         <div id="projects">
            <h2>Some lonely text down here to test against overflow.</h2>
         </div>
      </div>
<body>
</html>

我的CSS文件的内容

.about_container { 
   color: snow;
   display: flex;
   border-bottom: 1px solid black;
}

.about_container .welcome {
   background-color: #DCC7AA; 
   float: left;
   margin 0;
   width: 50%;
   -webkit-flex: 1; 
   -moz-flex: 1
   -ms-flex: 1; 
   flex: 1;
}

.about_container .welcome_content { 
   background-color: #F7882F; 
   margin: 0px;
   top: 0;
   float: right;
   width: 50%;
   -webkit-flex: 1; 
   -moz-flex: 1
   -ms-flex: 1; 
   flex: 1;
}

.about_container .welcome_content p{ 
   padding: 15px;
}

.about_container .welcome h1 {
   border: 3px solid snow;
   border-radius: 10px; 
   font-family: 'Julius Sans One', sans-serif;
   margin-left: 10%; margin-right: 10%;
   padding: 10px;
   text-align: center;
}

#projects{
   clear: both;
}

输出： The element in my left div is not vertically centered as you can see from this screenshot

Answer 1

将以下参数添加到.about_container .welcome h1

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

并将position: relative添加到.about_container .welcome

＆＃13;

.about_container {
  color: snow;
  display: flex;
  border-bottom: 1px solid black;
}
.about_container .welcome {
  background-color: #DCC7AA;
  float: left;
  position: relative;
  margin: 0;
  width: 50%;
  -webkit-flex: 1;
  -moz-flex: 1 -ms-flex: 1;
  flex: 1;
}
.about_container .welcome_content {
  background-color: #F7882F;
  margin: 0px;
  top: 0;
  float: right;
  width: 50%;
  -webkit-flex: 1;
  -moz-flex: 1 -ms-flex: 1;
  flex: 1;
}
.about_container .welcome_content p {
  padding: 15px;
}
.about_container .welcome h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 3px solid snow;
  box-sizing: border-box;
  border-radius: 10px;
  font-family: 'Julius Sans One', sans-serif;
  padding: 10px;
  text-align: center;
}
#projects {
  clear: both;
}

＆＃13;

<div class="about_container">
  <div class="welcome">
    <h1>Welcome<br>to my<br>Webpage!</h1>
  </div>
  <div class="welcome_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
<div id="projects">
  <h2>Some lonely text down here to test against overflow.</h2>
</div>
</div>

＆＃13;

Answer 2

只需将.about_container .welcome设为flex容器。将其添加到.about_container .welcome规则：

display: flex;
flex-direction: column;
justify-content: center;

垂直对齐浮动div内部的元素，没有已知高度

2 个答案: