CSS问题及其解决方法
CSS问题及其解决方法
提问于 2018-12-05 08:36:38
我正在创建一个时钟程序，我一直想要将元素居中，但是当使用“边距:自动”选项时，计算机不能正确地处理它，只是表现得好像属性不在那里一样。代码如下：
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%;
}谢谢你的帮助。
回答 3
Stack Overflow用户
发布于 2018-12-05 08:42:48
您是否正在尝试将#按钮居中？
您可能想要尝试给#按钮一个小于100%的宽度，然后对#按钮应用边距:0自动。
https://www.w3schools.com/css/tryit.asp?filename=trycss_align_container
Stack Overflow用户
发布于 2018-12-05 08:48:44
尝尝这个
button {
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}Stack Overflow用户
发布于 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有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53623496
复制相关文章
相似问题