在未知高度的浮動div中垂直對齊元素
[英]Vertically align element inside of a floating div with no known height
問題描述
我知道確實存在用於垂直對齊的解決方案，但是問題是有各種各樣的方法可以完成此操作，但是我還沒有找到處理flex容器的方法。 而且許多解決方案都是圍繞固定高度進行的，這對我毫無幫助，因為我的高度始終是未知的。
我想垂直對齊元素在我的左浮動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;
}
2 個解決方案
解決方案1
1 已采納 2017-01-12 22:48:14
將以下參數添加到.about_container .welcome h1
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
並添加position: relative對於.about_container .welcome
.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; }
<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>
解決方案2
1 2017-01-12 22:50:17
只需使.about_container .welcome成為flex容器。 將此添加到.about_container .welcome規則中：
display: flex;
flex-direction: column;
justify-content: center;
浮動元素內的垂直居中對齊圖標
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.