<!DOCTYPE html>
<html>
<head>
<title>Timer- Odliczanie!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
<script>
function set_cookie()
{
var cookie_time = new Date();
var dia = cookie_time.getMinutes();
document.cookie = "czas= dia + 30;";
var read = document.cookie;
alert(read);
}
function show_time()
{
//DAWNIEJ TU BYŁ KOD NA POMIAR ZE SYSTEMU
setTimeout("show_time()",1000);
setTimeout("sale()",1000);
}
function sale()
{
// USTAWIANIE ZMIENNYCH
var time = new Date();
var d = time.getDate();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var dzien = 23 - d;
var godzina = 23 - h;
var minuta = 59 - m;
var sec = 59 - s;
if (dzien <= 0) {
// JEŻELI DZIEŃ TO WARTOŚĆ PONIŻEJ ZERA:
dzien = 0;
godzina = 0;
minuta = 0;
sec = 0;
}
//WYŚWIETL CZAS
document.getElementById("d").innerHTML = dzien + '<figcaption class="capt">DNI</figcaption>';
document.getElementById("h").innerHTML = godzina + '<figcaption class="capt">GODZIN</figcaption>';
document.getElementById("m").innerHTML = minuta + '<figcaption class="capt">MINUT</figcaption>';
document.getElementById("s").innerHTML = sec +'<figcaption class="capt">SEKUND</figcaption>';
}
//set_cookie();
</script>
<style type="text/css">
.odliczanie
{
font-family: 'Special Elite', cursive;
background-color: #fff;
}
.timer
{
background-color: #7e3fd6;
width: 50px;
height: 50px;
padding: 40px;
display: inline-block;
text-align: center;
font-size: 36px;
border-radius: 10px;
font-family: 'Special Elite', cursive;
color: #fff;
}
.capt
{
font-size: 20px;
}
</style>
</head>
<body onload="show_time()">
<main class="time">CZAS:
<div id="day"></div>
<div id="hours">C</div>
<div id="minutes"></div>
<div id="seconds"></div>
</main>
<br><br>
<section>
<div class="odliczanie">
ZOSTAŁO:
<ul>
<li id="d" class="timer"></li>
<li id="h" class="timer"></li>
<li id="m" class="timer"></li>
<li id="s" class="timer"></li>
<br>
</ul>
</div>
</section>
</body>
</html>
Chcę aby tekst był jak na kafelku DNI (wyśrodkowany). Niestety, tekst jest bardzo po prawej. Jak można temu zapobiec?