html - 如何使用引导程序居中 3 个 div(带 SVG 轴的画布)
问题描述
我有 3 个 div
- 一种是画布(完全响应并在窗口调整大小时自动调整大小)
- 是用 SVG 制作的垂直轴
- 是用 SVG 制作的水平轴
这是我的代码的样子
var size = 300;
var canvas = new fabric.Canvas('g-canvas', {
selection: false,
backgroundColor: "#91653a",
});
canvas.setHeight(size);
canvas.setWidth(size);
$('#left-svg').attr({height:size});
$('#bottom-svg').attr({width:size + 57});
$('#svg-left-line').attr({y2:size});
$('#svg-bottom-line').attr({x2:size + 10});
ul,
li {
display: inline;
list-style: none;
margin: 2px;
}
ul {
text-align: center;
padding-left: 0px;
}
.toolMenu {
text-align: center;
}
#gSelect {
margin: 10px;
}
line{
fill: none;
stroke: black;
stroke-miterlimit: 10;
}
#left-canvas {
display: flex;
margin:10px;
}
#bottom-canvas {
height: 10px;
}
#bottom-canvas svg {
height: 10px;
}
#left-svg {
width: 10px;
margin-right: 5px;
}
#bottom-svg{
padding-left: 57px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col col-md-6 g-container-upper">
<div id="g-container" >
<div id="left-canvas" class="row justify-content-md-center">
<svg id="left-svg">
<g>
<line id="svg-left-line" x1="5" x2="5" y1="0"></line>
</g>
<g></g>
</svg>
<canvas id="g-canvas" style="border:1px solid #000000;"></canvas>
</div>
</div>
<div class="row">
<div id="bottom-canvas">
<svg id="bottom-svg" class="row justify-content-md-center">
<g>
<line id="svg-bottom-line" x1="0" y1="5" y2="5"></line>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
在这段代码中,我尝试提出事物的一般概念,但实际上我使用的是 angular,并且我正在刷新许多 dom 元素,以使所有内容都具有合适的大小。现在我的问题是我不知道如何将它作为一个整体对象来操作以使其居中并将所有东西粘在一起。
由于我并不总是了解所有 css 的 subtilities,因此我也得到了父 div 与子 div 不同的宽度,而没有机会在 DOM 检查器中查看该特定大小的来源。
任何帮助是极大的赞赏 ;)
解决方案
var size = 300;
var canvas = new fabric.Canvas('g-canvas', {
selection: false,
backgroundColor: "#91653a",
});
canvas.setHeight(size);
canvas.setWidth(size);
$('#left-svg').attr({height:size});
$('#bottom-svg').attr({width:size + 57});
$('#svg-left-line').attr({y2:size});
$('#svg-bottom-line').attr({x2:size + 10});
ul,
li {
display: inline;
list-style: none;
margin: 2px;
}
ul {
text-align: center;
padding-left: 0px;
}
.toolMenu {
text-align: center;
}
#gSelect {
margin: 10px;
}
line{
fill: none;
stroke: black;
stroke-miterlimit: 10;
}
#left-canvas {
display: flex;
margin:10px;
}
#bottom-canvas {
height: 10px;
}
#bottom-canvas svg {
height: 10px;
}
#left-svg {
width: 10px;
margin-right: 5px;
}
.g-container-upper {
margin: 0px auto;
}
#bottom-svg{
padding-left: 57px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="g-container-upper">
<div id="g-container" >
<div id="left-canvas" class="row justify-content-md-center">
<svg id="left-svg">
<g>
<line id="svg-left-line" x1="5" x2="5" y1="0"></line>
</g>
<g></g>
</svg>
<canvas id="g-canvas" style="border:1px solid #000000;"></canvas>
</div>
</div>
<div class="row">
<div id="bottom-canvas">
<svg id="bottom-svg" class="row justify-content-md-center">
<g>
<line id="svg-bottom-line" x1="0" y1="5" y2="5"></line>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- selenium - 如何使用 Codeception 执行 Javascript 并获取返回值
- scala - 由于多个 scala lib 版本,intellij 2019.02 无法运行任何 scala 类
- google-apps-script - 用户在带有对话框的谷歌表中输入值(谷歌脚本)
- oracle - 选择 Oracle 数据库字符集
- perl - 使用严格和警告获取列表错误
- google-apps-script - 在工作表中的任何位置添加新行时,如何使用 Apps 脚本基于其他单元格设置单元格的值
- django-rest-framework - django rest 框架的 django-filter:in 运算符无法正常工作(它认为这是一个选择字段?)
- c++ - 类的构造函数和函数调用运算符()重载之间的C ++歧义
- shell - 根据数值对文件中的值进行排序
- python - 在 Python 子进程中调用 pip 时出现 FileNotFoundError