爲什麼時鐘的h1標籤沒有完全垂直居中

Question

我正在研究顯示時鐘定時器的h1標籤不是垂直居中（頁面中心）的pomodoro時鐘。我怎麼能垂直居中文本，而不會失去水平對齊？此外，如果有人可以建議我怎樣才能使控件內部的 - （減號）和+（加號）符號更接近中間位置，而不會移動文本。

body { 
 
    background-color: #545454; 
 
} 
 

 
.title { 
 
    margin: auto; 
 
    text-align: center; 
 
    font-size: 30px; 
 
} 
 

 
.container { 
 
    text-align: center; 
 
} 
 

 
h2 { 
 
    font-size: 50px; 
 
    margin: 0 0 0 0; 
 
} 
 

 
.clockContainer { 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.timer { 
 
    margin: 0 50px; 
 
    margin-top: 70px; 
 
    text-align: center; 
 
    border: solid black 1px; 
 
    font-size: 44px; 
 
    width: 500px; 
 
    height: 200px; 
 
    display: inline-block; 
 
} 
 

 
.controlContainer { 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 

 
.control { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 100px; 
 
    border: solid black 1px; 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 

 
.button { 
 
    margin-top: 30px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
.time { 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    font-size: 20px; 
 
} 
 

 
.ticker { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    margin-top: 0px; 
 
} 
 

 
.minus { 
 
    margin-right: 10px; 
 
} 
 

 
.plus { 
 
    margin-left: 10px; 
 
}

<div class="container"> 
 
    <!-- header title --> 
 
    <div class="title primary-text"> 
 
    <h1>Pomodoro Clock</h1> 
 
    </div> 
 
    <!-- clock container --> 
 
    <div class="clockContainer"> 
 
    <h2>Session</h2> 
 
    <!-- timer/clock --> 
 
    <div class="timer"> 
 
     <h1 class="display">23:59</h1> 
 
    </div> 
 
    <!-- this section for controlling clock --> 
 
    <div class="controlContainer"> 
 
     <div class="control"> 
 
     <div class="button title">Start</div> 
 
     <div class="button hide title">Stop</div> 
 
     </div> 
 
     <div class="control"> 
 
     <h3 class="time">30</h3> 
 
     <h3 class="title work">Work</h3> 
 
     <h3 class="minWork ticker minus">-</h3> 
 
     <h3 class="plusWork ticker plus">+</h3> 
 
     </div> 
 
     <div class="control"> 
 
     <h3 class="time">10</h3> 
 
     <h3 class="title break">Break</h3> 
 
     <h3 class="minBrake ticker minus">-</h3> 
 
     <h3 class="plusBrake ticker plus">+</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你的問題是不完全清楚，但嘗試將其應用到的元素：

position: relative; 
top: 50%; 
transform: translateY(-50%); 

Answer 2

h1 { 
    vertical-align: middle; 
} 

這將對準H1你要我相信的樣子。

Answer 3

剛刪除height爲.timer爲中心h1。由於固定的height,h1未居中，因爲它大於200px。如果你想減少height的.timer只是減少h1的margin-top和margin-bottom。

要移動+並-接近中間下降margin-top值.ticker（例如，從0到-5px）。演示：

body { 
 
    background-color: #545454; 
 
} 
 

 
.title { 
 
    margin: auto; 
 
    text-align: center; 
 
    font-size: 30px; 
 
} 
 

 
.container { 
 
    text-align: center; 
 
} 
 

 
h2 { 
 
    font-size: 50px; 
 
    margin: 0 0 0 0; 
 
} 
 

 
.clockContainer { 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.timer { 
 
    margin: 0 50px; 
 
    margin-top: 70px; 
 
    text-align: center; 
 
    border: solid black 1px; 
 
    font-size: 44px; 
 
    width: 500px; 
 
    display: inline-block; 
 
} 
 

 
.controlContainer { 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 

 
.control { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 100px; 
 
    border: solid black 1px; 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 

 
.button { 
 
    margin-top: 30px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
.time { 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    font-size: 20px; 
 
} 
 

 
.ticker { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    margin-top: -5px; 
 
} 
 

 
.minus { 
 
    margin-right: 10px; 
 
} 
 

 
.plus { 
 
    margin-left: 10px; 
 
}

<div class="container"> 
 
    <!-- header title --> 
 
    <div class="title primary-text"> 
 
    <h1>Pomodoro Clock</h1> 
 
    </div> 
 
    <!-- clock container --> 
 
    <div class="clockContainer"> 
 
    <h2>Session</h2> 
 
    <!-- timer/clock --> 
 
    <div class="timer"> 
 
     <h1 class="display">23:59</h1> 
 
    </div> 
 
    <!-- this section for controlling clock --> 
 
    <div class="controlContainer"> 
 
     <div class="control"> 
 
     <div class="button title">Start</div> 
 
     <div class="button hide title">Stop</div> 
 
     </div> 
 
     <div class="control"> 
 
     <h3 class="time">30</h3> 
 
     <h3 class="title work">Work</h3> 
 
     <h3 class="minWork ticker minus">-</h3> 
 
     <h3 class="plusWork ticker plus">+</h3> 
 
     </div> 
 
     <div class="control"> 
 
     <h3 class="time">10</h3> 
 
     <h3 class="title break">Break</h3> 
 
     <h3 class="minBrake ticker minus">-</h3> 
 
     <h3 class="plusBrake ticker plus">+</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>