为什么时钟的h1标签不能完全垂直居中
为什么时钟的h1标签不能完全垂直居中
提问于 2017-08-01 03:07:21
我正在做一个pomodoro时钟，显示时钟计时器的h1标签不是垂直居中(页面中心)。如何在不丢失水平对齐的情况下使文本垂直居中？另外，如果有人可以建议我如何在不移动文本的情况下将控件中的-(减号)和+(加号)靠近中间。
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>
回答 3
Stack Overflow用户
发布于 2017-08-01 03:10:59
您的问题不是完全清楚，但请尝试将此应用于元素：
position: relative;
top: 50%;
transform: translateY(-50%);Stack Overflow用户
发布于 2017-08-01 03:14:12
h1 {
vertical-align: middle;
}我相信这会按照你想要的方式对齐h1。
Stack Overflow用户
发布于 2017-08-01 03:24:55
只需将.timer的height移至h1的中心即可。由于固定的height，h1不居中，因为它比200px大。如果你想减少.timer的height，只要减少h1的margin-top和margin-bottom即可。
要使+和-更接近中间值，请降低.ticker的margin-top值(例如，从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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45423523
复制相关文章
相似问题
腾讯云开发者
