简易计算机没有居中
来源：3-1 添加JS功能
战神40
2019-09-06 10:41:19
<!DOCTYPE html>
<html>
<head>
<title>简易计算机</title>
<style type="text/css">
body{
background-color: #eee;
}
#calculator{
margin: 100px 0 0 150px;
}
</style>
</head>
<body>
<div id="calculator">
<p>
<input type="text" class="formerInput" value="1" />
<span class="sign">+</span>
<input type="text" class="laterInput" value="1">
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<input type="button" value="+">
<input type="button" value="-">
<input type="button" value="X">
<input type="button" value="%">
</p>
</div>
</body>
</html>
1回答
-
好帮手慕言
2019-09-06
同学你好，老师给元素设置margin: 100px 0 0 150px;居中是因为分辨率的问题。因为设置的值是固定的，所以分辨率不同，显示的效果也是不同的。
如果同学要让计算器垂直水平方向都居中，可以参考下方的方法。
代码参考：
代码具有灵活性，实现效果的方式有很多种，上面的方法可以做参考哦。
如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 2
回答 1