중앙에 필요한 인라인 JS 요소 (카운트 다운 타이머)가 있습니다. 그러나 text-align : center 및 width : 100 %를 사용하면 실제 중앙이 아닌 각각의 간격이 25 % 인 전체 페이지가 늘어납니다.
실제로 중앙에 필요한 방법은 다음과 같습니다. http://prnt.sc/b8v9fv (왼쪽과 오른쪽에 동일한 공간 포함). 이 문제를 해결하기 위해 무엇을 봐야할지 아십니까?
https://jsfiddle.net/gnj8nLre/
HTML :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>
<div id="forsidediv">
<img id="forsidepic" src="forsidepic.png">
</div>
<div id="overskrift">
<h1>EVENTET STARTER OM</h1>
</div>
<div id="countdowner">
<table id="table">
<tr>
<div id="countdown">
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
</div>
<tr>
<tr>
<td class="timeLabel">Days</td>
<td class="timeLabel">Hours</td>
<td class="timeLabel">Mins</td>
<td class="timeLabel">Secs</td>
</tr>
</tr>
</tr>
</table>
</div>
<script>
CountDownTimer('06/25/2016 10:00 AM', 'id');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id+"1").innerHTML = days;
document.getElementById(id+"2").innerHTML = hours;
document.getElementById(id+"3").innerHTML = minutes;
document.getElementById(id+"4").innerHTML = seconds;
}
timer = setInterval(showRemaining, 1000);
}
</script>
</body>
</html>
CSS :
@charset "utf-8";
body {
margin:0;
}
h1 {
position:absolute;
width:100%;
text-align:center;
margin:0;
color:black;
font-family:Helvetica;
}
#countdowner {
color:black;
position:absolute;
margin:0;
margin-top:1em;
padding:0;
width:100%;
font-size:2em;
font-family:Helvetica;
}
#table {
width:100%;
text-align:center;
}
#forsidediv {
position:fixed;
text-align: center;
bottom:0;
}
#forsidepic {
width: 100%;
}
tds width:100%;에서 제거 #table하고 추가 margin:0 auto;한 다음 일부 패딩을 추가 해야합니다.
#table {
margin:0 auto;
text-align:center;
}
#table td{
padding:0 10px;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다