我正在创建一个时钟程序,我一直想要将元素居中,但是当使用“边距:自动”选项时,计算机不能正确地处理它,只是表现得好像属性不在那里一样。代码如下:
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%;
}
谢谢你的帮助。
发布于 2018-12-05 08:42:48
您是否正在尝试将#按钮居中?
您可能想要尝试给#按钮一个小于100%的宽度,然后对#按钮应用边距:0自动。
https://www.w3schools.com/css/tryit.asp?filename=trycss_align_container
发布于 2018-12-05 08:48:44
尝尝这个
button {
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
发布于 2018-12-05 09:01:53
我没看过你的代码,但不管你想要什么,
在它上面添加一个父div
,并在您的父div
中添加您想要居中的元素。
给这位家长一个ID
或class
来回答这个问题,我正在选课成为div-andrew
像这样的东西
<div class="div-andrew">
然后在你的css中,你可以这样做
.div-andrew {
display: flex,
flex-direction: row
justify-content: center
}
这篇文章肯定会对你https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35有所帮助。
https://stackoverflow.com/questions/53623496
复制相似问题