如何將div沿y軸居中？
[英]How do I center a div along the y axis?
問題描述
我想將我的div元素不僅在水平方向上而且在垂直方向上都以block和text-center類text-center 。 我嘗試在其上添加一個margin-top ，但這最終將其父元素#home與它上方的ul分開了。 您需要用任何jpeg #home我的#home （在下面的css中#home我的background圖像， #home了解我的意思。 我希望顯示完整圖像，使其頂部像現在一樣觸摸ul ，但我也想向下移動#home內的div，而無需更改其大小。 我怎樣才能做到這一點？ 另外請注意，我使用的是Bootstrap CSS模板，因此使用類名。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="css/porfolioPage.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container-fluid">
<ul id="contents" class="nav nav-pills">
<li>
<a href="#" id="productions">In Production</a>
</li>
<li class="pull-right">
<a href='#'>Contact</a>
</li>
<li class="pull-right">
<a href='#'>Portfolio</a>
</li>
<li class="pull-right">
<a href='#'>About</a>
</li>
<li class="pull-right">
<a href='#'>Home</a>
</li>
</ul>
<div id="home">
<div class="block text-center">
<h1 class="homeHeading">Sandoval Labs Incorporated</h1>
<h3 id="homeHeading">Developing</h3>
<div class="btnList">
<a class="btn btn-primary" href="#">Twitter</a>
<a class="btn btn-primary" href="#">Facebook</a>
<a class="btn btn-primary" href="#">Linkedin</a>
<a class="btn btn-primary" href="#">Github</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
body{
font-family: "avenir";
font-weight:500;
}
.nav-pills{
font-family:arial;
font-size:2.0em;
background-color:black;
}
#productions{
font-family:Lobster;
}
#home{
**background-image:url(snoopAndZuck.jpg);**
background-size:cover;
height:800px;
}
.btn-primary{
font-size:1.7em;
}
h1{
font-size: 4em;
}
.homeHeading{
margin:0 0 0 0;
padding:0px;
}
.block{
opacity:.7;
background-color: #000000;
padding:10px;
width:85%;
margin-left:auto;
margin-right:auto;
}
4 個解決方案
解決方案1
1 已采納 2016-01-31 12:58:33
看一下這個：
http://codepen.io/xvariant/pen/mVKjzx
body { font-family: "avenir"; font-weight: 500; } .nav-pills { font-family: arial; font-size: 2.0em; background-color: black; } #productions { font-family: Lobster; } #home { background: red; height: 800px; } .btn-primary { font-size: 1.7em; } h1 { font-size: 4em; } .homeHeading { margin: 0 0 0 0; padding: 0px; } .block { opacity: .7; background-color: #000000; padding: 10px; width: 85%; margin-left: auto; margin-right: auto; position: relative; top: 50%; transform: translateY(-50%); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <ul id="contents" class="nav nav-pills"> <li> <a href="#" id="productions">In Production</a> </li> <li class="pull-right"> <a href='#'>Contact</a> </li> <li class="pull-right"> <a href='#'>Portfolio</a> </li> <li class="pull-right"> <a href='#'>About</a> </li> <li class="pull-right"> <a href='#'>Home</a> </li> </ul> <div id="home"> <div class="block text-center"> <h1 class="homeHeading">Sandoval Labs Incorporated</h1> <h3 id="homeHeading">Developing</h3> <div class="btnList"> <a class="btn btn-primary" href="#">Twitter</a> <a class="btn btn-primary" href="#">Facebook</a> <a class="btn btn-primary" href="#">Linkedin</a> <a class="btn btn-primary" href="#">Github</a> </div> </div> </div> </div>
您需要top指定距父div頂部的距離。 然后將子div向上移動其自身高度的一半。
解決方案2
0 2016-01-31 05:32:06
在不看您的代碼的情況下，我喜歡使用calc將div垂直居中。
div {
width:200px;
height:200px;
top:calc(50% - 100px); /* 100px is half the height..*/
position:absolute;
background:red;
}
解決方案3
0 2016-01-31 07:56:38
我在“ block”類開始之前放置了CSS樣式為“ padding：25px”的空格。
https://jsfiddle.net/sadika/y8h1eLrq/
讓我知道這是否對您有幫助，或者我可以幫助您完成您想要的事情。
CSS：
<style>
body{
font-family: "avenir";
font-weight:500;
margin:0px;
padding:0px;
}
.nav-pills{
font-family:arial;
font-size:2.0em;
background-color:black;
}
#productions{
font-family:Lobster;
}
#home{
/*background-image:url(snoopAndZuck.jpg);*/
background-image: url(http://lorempixel.com/1600/400/nature/);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
height:800px;
}
.btn-primary{
font-size:1.7em;
}
h1{
font-size: 4em;
}
.homeHeading{
margin:0 0 0 0;
padding:0px;
}
.block{
opacity:.7;
background-color: #000000;
padding:10px;
width:85%;
margin-left:auto;
margin-right:auto;
}
@media (max-width: 578px) {
.btnList a {
margin: 2px 0px;
}
}
</style>
HTML：
<body>
<div class="container-fluid" style="padding: 0px; margin: 0px;">
<ul id="contents" class="nav nav-pills">
<li>
<a href="#" id="productions">In Production</a>
</li>
<li class="pull-right">
<a href='#'>Contact</a>
</li>
<li class="pull-right">
<a href='#'>Portfolio</a>
</li>
<li class="pull-right">
<a href='#'>About</a>
</li>
<li class="pull-right">
<a href='#'>Home</a>
</li>
</ul>
<div id="home">
<div style="padding:25px;"></div>
<div class="block text-center">
<h1 class="homeHeading" style="color:white;">Sandoval Labs Incorporated</h1>
<h3 id="homeHeading" style="color:white;">Developing</h3>
<div class="btnList">
<a class="btn btn-primary" href="#">Twitter</a>
<a class="btn btn-primary" href="#">Facebook</a>
<a class="btn btn-primary" href="#">Linkedin</a>
<a class="btn btn-primary" href="#">Github</a>
</div>
</div>
</div>
</div>
<body>
解決方案4
-1 2016-01-31 05:35:36
嘗試添加到CSS部分：
line-height: XXXpx; (or XXX%)
它可以在文本上工作，但也可以在div上工作，我從來沒有嘗試過...但是我希望你好運:)
如何創建隨頁內容滾動的粘性頁眉（沿x軸滾動）和側欄（沿y軸滾動）
[英]How do I create a sticky header (scrolls along x-axis) and sidebar (scrolls along y-axis), which scroll with the page content
CSS轉換-模擬攝影機，沿平移軸移動y軸，並保持平移軸的中心
[英]CSS transform - Simulating a camera, moving the y axis along the panning axis and keeping the center of pan axis
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.