1
円内に要素を配置する方法。ここにある例はここにありますhttps://codepen.io/anon/pen/JNmEVB。私がdiv内の中心にする必要があるもの。私はマージンで試しています：0オート;しかしnothig :(。あなたが任意のアイデアはどのようにこれを作るために男を行います。私は、円div内の中心要素（円）
内のHTML
<body>
<div id="del-countdown">
<div id="clock"></div>
<div id="units">
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>
</body>
のCss
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: Ubuntu, sans-serif;
}
h1 {
color: #fff;
text-align: center;
font-size: 74px;
letter-spacing: 10px;
margin-bottom: 70px;
}
#del-countdown {
width: 600px;
height: 600px;
margin: 15% auto;
background-color: rgba(255, 0, 0, 0.3);
border-radius: 50%;
border-style: solid;
border-color: #0000ff;
}
#clock span {
float: left;
text-align: center;
font-size: 84px;
margin: 0 2.5%;
color: #fff;
padding: 20px;
width: 20%;
border-radius: 20px;
box-sizing: border-box;
}
#clock span:nth-child(1) {
background: #fa5559;
}
#clock span:nth-child(2) {
background: #26c2b9;
}
#clock span:nth-child(3) {
background: #f6bc58;
}
#clock:after {
content: '';
display: block;
clear: both;
}
#units span {
float: left;
width: 25%;
text-align: center;
margin-top: 30px;
color: #ddd;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
text-shadow: 1px 1px 1px rgba(10, 10, 10, 0.7);
}
span.turn {
animation: turn 0.7s ease forwards;
}
@keyframes turn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
JS
"use strict";
function updateTimer(deadline) {
var time = deadline - new Date();
return {
hours: Math.floor(time/(1000 * 60 * 60) % 24),
minutes: Math.floor(time/1000/60 % 60),
seconds: Math.floor(time/1000 % 60),
total: time
};
}
function animateClock(span) {
span.className = "turn";
setTimeout(function() {
span.className = "";
}, 700);
}
function startTimer(id, deadline) {
var timerInterval = setInterval(function() {
var clock = document.getElementById(id);
var timer = updateTimer(deadline);
clock.innerHTML = "<span>" + timer.hours + "</span><span>" + timer.minutes + "</span><span>" + timer.seconds + "</span>";
var spans = clock.getElementsByTagName("span");
animateClock(spans[2]);
if (timer.seconds == 59){
animateClock(spans[1]);
}
if (timer.minutes == 59 && timer.seconds == 59){
animateClock(spans[0]);
}
if (timer.total < 1) {
clearInterval(timerInterval);
clock.innerHTML = "<span>0</span><span>0</span><span>0</span>";
}
}, 1000);
}
window.onload = function() {
var deadline = new Date("Jan 1, 2018 12:00:00");
startTimer("clock", deadline);
};