如何解决以块显示格式将HTML / CSS中的多个对象居中
我在div的“容器”中有两个画布元素“ canvas1”和“ canvas2”。我试图以基本的display: block;格式显示这些画布元素，就像通常将它们自动设置为格式一样，但是当尝试将div或元素分别居中时，它总是会产生古怪的结果。
画布“ canvas3”的CSS代码可以正确地居中放置，但是应用于div时，其中的画布元素不会移动。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
</head>
<body>
<div id="container">Hello
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
</div>
<canvas id="canvas3"></canvas>
<style>
#container {
margin-left: auto;
margin-right: auto;
}
canvas {
height: 150px;
width: 150px;
border: 2px solid black;
display: block;
}
#canvas1 {
background-color: khaki;
}
#canvas2 {
background-color: springgreen;
}
#canvas3 {
background-color: navajowhite;
margin: auto;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
</body>
</html>注意：运行摘要时，请确保查看完整页面。
用于实现此目的的方法除了使用block display属性的2个canvas元素之外，不需要包含其他任何内容，或者另一种产生相同外观的方法。上面显示的尝试在div中包含canvas元素，但是我不确定这是否是实现目标的最佳方法。任何帮助将不胜感激。
The result needs to look like this.
解决方法
将margin:auto添加到canvas样式中，我如下所述更改了#container。
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
</head>
<body>
<div id="container">Hello
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>
</div>
<style>
#container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
canvas {
height: 150px;
width: 150px;
border: 2px solid black;
display: block;
margin: auto;
}
#canvas1 {
background-color: khaki;
}
#canvas2 {
background-color: springgreen;
}
#canvas3 {
background-color: navajowhite;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
</body>
</html>,
#container {
display: flex;
flex-direction: column;
}
#canvas1 {
background-color: khaki;
margin: 0 auto;
}
#canvas2 {
background-color: springgreen;
margin: 0 auto;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。