垂直居中（使用Bootstrap-CSS）

-2

我一直在爲網站編寫一些代碼，但我無法垂直居中文本。我已經閱讀了關於如何垂直居中html的StackOverflow和其他網站的多個答案（主要使用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%); 
}

來源

2017-04-25 user2733385

[垂直對齊引導3]可能重複（http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3） – happymacarts

最有可能涉及浮動元素和嵌套高度'vh'單位。你能最小化這個例子嗎？ – ZimSystem

你可以試試這個。

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/

來源

2017-04-26 03:28:13

垂直居中（使用Bootstrap-CSS）

回答

相關問題