Question

我有一个我需要居中的内联JS元素（倒数计时器）。但是当我使用text-align：center和width：100％时，它会在整个页面上拉伸，每个页面之间的间距为25％，而不是实际的中心。

我实际需要它居中的方式是这样的：http://prnt.sc/b8v9fv（在左侧和右侧具有相等的空间）。知道我应该考虑解决这个问题吗？

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%;
}

Answer 1

您应该从#include <LiquidCrystal.h> //Load Liquid Crystal Library LiquidCrystal LCD(10, 9, 5, 4, 3, 2); //Create Liquid Crystal Object called LCD int trigPin=13; //Sensor Trip pin connected to Arduino pin 13 int echoPin=11; //Sensor Echo pin connected to Arduino pin 11 int myCounter=0; //declare your variable myCounter and set to 0 int servoControlPin=6; //Servo control line is connected to pin 6 float pingTime; //time for ping to travel from sensor to target and return float targetDistance; //Distance to Target in inches float speedOfSound=776.5; //Speed of sound in miles per hour when temp is 77 degrees. void setup() { Serial.begin(9600); pinMode(trigPin, OUTPUT); pinMode(echoPin, INPUT); LCD.begin(16,2); //Tell Arduino to start your 16 column 2 row LCD LCD.setCursor(0,0); //Set LCD cursor to upper left corner, column 0, row 0 LCD.print("Target Distance:"); //Print Message on First Row } void loop() { digitalWrite(trigPin, LOW); //Set trigger pin low delayMicroseconds(2000); //Let signal settle digitalWrite(trigPin, HIGH); //Set trigPin high delayMicroseconds(15); //Delay in high state digitalWrite(trigPin, LOW); //ping has now been sent delayMicroseconds(10); //Delay in high state pingTime = pulseIn(echoPin, HIGH); //pingTime is presented in microceconds pingTime=pingTime/1000000; //convert pingTime to seconds by dividing by 1000000 (microseconds in a second) pingTime=pingTime/3600; //convert pingtime to hourse by dividing by 3600 (seconds in an hour) targetDistance= speedOfSound * pingTime; //This will be in miles, since speed of sound was miles per hour targetDistance=targetDistance/2; //Remember ping travels to target and back from target, so you must divide by 2 for actual target distance. targetDistance= targetDistance*63360; //Convert miles to inches by multipling by 63360 (inches per mile) LCD.setCursor(0,1); //Set cursor to first column of second row LCD.print(" "); //Print blanks to clear the row LCD.setCursor(0,1); //Set Cursor again to first column of second row LCD.print(targetDistance); //Print measured distance LCD.print(" inches"); //Print your units. delay(250); //pause to let things settle }移除width:100%;并添加#table，然后在tds中添加一些填充

margin:0 auto;

https://jsfiddle.net/gnj8nLre/1/

Answer 2

这是一个小提琴：

https://jsfiddle.net/c2229s5g/

我只更改了#table的CSS并添加了：

#table {
  display: flex;
  justify-content: center;
}

这样我就把它变成了一个flexbox父项，所有的孩子都在这个行中居中。实际上我也会稍微更改一下HTML（删除所有表格并在计数器和标签元素周围放置一个包装），但它也已经适用于这个小小的改动。

Div没有正确居中

2 个答案: