以块显示格式居中HTML / CSS中的多个对象[重复]
Posted
技术标签:
【中文标题】以块显示格式居中HTML / CSS中的多个对象[重复]【英文标题】：Centering multiple objects in HTML/CSS in block display format [duplicate] 【发布时间】：2020-12-19 04:28:23 【问题描述】：我有两个画布元素，“canvas1”和“canvas2”，在 div 内，“container”。我试图让这些画布元素以基本的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>注意：运行 sn-p 时，请确保查看完整页面。
用于实现此目的的方法不需要包含任何内容，但需要包含使用块显示属性的 2 个画布元素，或产生相同外观的其他方法。上面显示的尝试在 div 中包含画布元素，但我不确定这是否是实现目标的最佳方法。任何帮助将不胜感激。
The result needs to look like this.
【问题讨论】：
你只是在#canvas1 和#canvas2 样式中缺少margin:auto;（或者如果你希望它适用于它们，你可以将它添加到canvas）
【参考方案1】：
将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>【讨论】：
是否可以让 2 个画布与窗口顶部和底部的距离相等？这个版本我已经遇到过，但我希望有一种方法可以使画布与顶部和底部边缘之间的距离相等 我不清楚。您是指画布之间的空隙吗？ 我希望它能够像我发布的图片一样循环播放。第二个画布的底部和窗口的底部之间有很大的间隙，而页面顶部和窗口的顶部之间的间隙非常小。我希望距离相等 我已经编辑了我的代码。你可以试试这个。【参考方案2】：#container
display: flex;
flex-direction: column;
#canvas1
background-color: khaki;
margin: 0 auto;
#canvas2
background-color: springgreen;
margin: 0 auto;
【讨论】：
这只是将画布拉伸到屏幕两侧？ 查看编辑后的版本以上是关于以块显示格式居中HTML / CSS中的多个对象[重复]的主要内容，如果未能解决你的问题，请参考以下文章