垂直居中(使用Bootstrap-CSS)
问题描述:
我一直在为网站编写一些代码,但我无法垂直居中文本。我已经阅读了关于如何垂直居中html的*和其他网站的多个答案(主要使用display:table
和display:table-cell
方法和top:50%, transformY
方法),但是,我无法成功实现这两种方法之一。我在这里附上我的代码,希望有人能够发现我的我的错误,导致代码无法工作。 (在此代码中,我使用了垂直居中文本的top:50%, transformY
方法)。任何帮助将不胜感激。垂直居中(使用Bootstrap-CSS)
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<title>Game Timer and Scorekeeper</title>
</head>
<body>
<div class="container-fluid">
<div class="row" id="heading">
<div class="col-xs-12">
<div class="positioner">
<h1>Game Timer and Scorekeeper</h1>
</div>
</div>
</div>
<div class="row" id="top-labels">
<div class="col-xs-3 labels teamlabel" id="a-label">
<div class="positioner">
<h2>Team A</h2>
</div>
</div>
<div class="col-xs-6 labels" id="gameclock-label">
<div class="positioner">
<h2>Game Clock</h2>
</div>
</div>
<div class="col-xs-3 labels teamlabel" id="b-label">
<div class="positioner">
<h2>Team B</h2>
</div>
</div>
</div>
<div class="row" id="thirdrow">
<div class="col-xs-3 pointsclock teampoints" id="pointsA">
<div class="positioner">
<h1>POINTS A</h1>
</div>
</div>
<div class="col-xs-6 pointsclock" id="gameclock">
<div class="positioner">
<h1>GAME CLOCK</h1>
</div>
</div>
<div class="col-xs-3 pointsclock teampoints" id="pointsB">
<div class="positioner">
<h1>POINTS B</h1>
</div>
</div>
</div>
<div class="row" id="fourthrow">
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolA">
<div class="positioner">
<h2>CONTROL A</h2>
</div>
</div>
<div class="col-xs-6 ptcontclock" id="questionclock">
<div class="positioner">
<h2>QUESTION CLOCK</h2>
</div>
</div>
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolB">
<div class="positioner">
<h2>CONTROL B</h2>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container-fluid {
width: 100vw;
height: 100vh;
}
#heading {
height: 15vh;
border: 2px solid;
}
#top-labels {
height: 10vh;
border: 2px solid;
width: 100vw;
}
#top-labels .labels {
border-right: 2px solid;
border-left: 2px solid;
}
#thirdrow {
height: 40vh;
border: 2px solid;
width: 100vw;
}
#thirdrow .pointsclock {
height: 40vh;
border-right: 2px solid;
border-left: 2px solid;
}
#fourthrow {
height: 35vh;
width: 100vw;
}
#fourthrow .ptcontclock {
border-right: 2px solid;
border-left: 2px solid;
height: 35vh;
}
.positioner{
height:100%;
width:100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
答
你可以试试这个。
HTML
<main>
<div>
I'm a block-level element with an unknown height, centered vertically
within my parent.
</div>
</main>
CSS
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
width: 200px;
padding: 20px;
margin: 20px;
display: flex;
flex-direction: column;
justify-content: center;
resize: vertical;
overflow: auto;
}
main div {
background: black;
color: white;
padding: 20px;
resize: vertical;
overflow: auto;
}
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
检查该链接以供参考https://css-tricks.com/centering-css-complete-guide/
[垂直对齐引导3]可能重复(http://*.com/questions/20547819/vertical-align-with-bootstrap-3) – happymacarts
最有可能涉及浮动元素和嵌套高度'vh'单位。你能最小化这个例子吗? – ZimSystem