如何将第一行垂直对齐设置为居中

Question

我在行部分使用IIS Web App Deploy类，但它不起作用：

＆＃13;

＆＃13;

align-items-center

＆＃13;

＆＃13;

＆＃13;

我希望该线在页面上垂直居中，如图所示：

Answer 1

您的代码运行正常，但您必须设置import numpy as np import cv2 centroids = np.array([[265., 751.], [383., 681.], [386., 889.], [434., 490.], [446., 444.], [450., 451.], [539., 1365.], [571., 1365.], [630., 645.], [721., 1365.], [767., 70.], [767., 82.], [767., 636.]]) canvas = np.ones((1000, 1000, 3), dtype=np.uint8) * 255 CIRCLE_RADIUS = 10 CIRCLE_THICKNESS = 2 COLOR_RED = np.array([0, 0, 255]) for c in centroids: o_c = (int(c[0]), int(c[1])) cv2.circle(canvas, o_c, CIRCLE_RADIUS, COLOR_RED, CIRCLE_THICKNESS) cv2.imwrite("./debug.png", canvas) 。目前，height和.container占据了内容的高度。因此，您必须将.row设置为height，并且.row应该是垂直居中的：

＆＃13;

＆＃13;

.col

＆＃13;

＆＃13;

＆＃13;

要在网站的可见区域设置垂直中心，您可以使用<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row align-items-center" style="height:500px;"> <div class="col-12 bg-warning"> hello </div> </div> </div>代替固定尺寸。

Answer 2

您需要使页面占据100％的高度。

re.findall

Answer 3

试试这个：https://jsfiddle.net/q1ypnzg8/2/

<div class="container divouter">
    <div class="row align-items-center divmiddle">
        <div class="col-12 bg-warning divinner">
            hello
        </div>
    </div>
</div>

CSS

.divouter {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.divmiddle {
    display: table-cell;
    vertical-align: middle;
}

.divinner {
    margin-left: auto;
    margin-right: auto; 
    text-align: center;
}

Answer 4

CSS在将文本放在中心时有局限性。为了兼容浏览器，我建议您使用内联对齐属性。

var val1 = document.querySelector('[title="inspection"]').value;

CSS可以使用的其他属性包括：

<div align="center">Content goes here.</div> #divID{ margin:auto

text-align: center;

虽然，我更喜欢margin auto属性，因为某些浏览器中某些标签的文本对齐可能会失败。

Answer 5

您可以为.row.align-items-center

添加此css

.row.align-items-center {
    position: absolute;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

希望这会有所帮助。