Question

我一直想将一个时钟程序的元素居中，但我正在创建过程中，但是当使用“ margin：auto”选项时，计算机无法正确处理它，而只是在好像该属性不是在那里。这是代码：

HTML

<html>
<head>
    <title>Time Clock</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="timeclock.css">
    <script src="timeclock.js"></script>
</head>
<body>

    <div class="main">

        <h3 id="time">Current time is: </h3>

            <div id="buttons">       
                <p id="clockin">Clock-in time: </p>
                <button type="button" onclick="clockIn('clockin')">Clock In</button>
                <p id="clockout">Clock-out time: </p>
                <button type="button" onclick="clockOut('clockout')">Clock Out</button><br>
                <p id="breakout">Break-out time: </p>
                <button type="button" onclick="breakOut('breakout')">Break Out</button>
                <p id="breakin">Break-in time: </p>
                <button type="button" onclick="breakIn('breakin')">Break In</button>
            </div>

    </div>

</body>

CSS

html{
    font-family: Arial;
    font-weight: bold;
    background-color: #ffe08f;
}

button{
    background-color: green;
    width: 200px;
    height: 100px;
    color: white;
    font-family: Arial;
    font-weight: bold;
    margin: 10px 10px;
    float: left;
}

.main{
    margin: 10% 25%;
}

感谢您的帮助。

Answer 1

我没有看到您的代码，但是无论您想居中还是什么，

在其上方div上添加一个父元素div，并在您的父元素ID内添加要居中的元素。

给这个答案的父母class或<div class="div-andrew">，我上课是div-andrew

类似的东西

.div-andrew {
display: flex, 
flex-direction: row
justify-content: center
}

然后在CSS中，您可以执行以下操作

bayer=True

本文肯定会为您https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35

提供帮助

Answer 2

您是否要使#button居中？

您可能希望尝试给#buttons宽度小于100％的宽度，然后将margin：0 auto应用于#buttons。

https://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

Answer 3

尝试

button {
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

CSS问题及其解决方法

3 个答案: