在div上有其他文本时居中对齐文本

Question

我知道这可能听起来像一个愚蠢的问题但是这里有 我喜欢居中对齐文本，而div中还有其他文字。

HTML

 <div class="divisions" id="lightsBox">
    <h1> Lights Status </h1>

    <p class="divisionsText">Number of Lights On: </p> <p id="nLightsOn"></p> <br>
    <p class="divisionsText">Number of Lights Off: </p> <p id="nLightsOff"></p>


 </div>

的Javascript

 document.getElementById("lightsBox").style.opacity = 0.6;
 document.getElementById("lightsBox").style.backgroundColor = "grey";
 var h = document.createElement("H1")               


 h.appendChild(document.createTextNode("Feature not avaliable"));
 h.style.verticleAlign = "middle";
 h.style.textAlign = "center";
 h.style.color ="red";

我希望将＆＃34;功能不可用＆＃34; 文本对齐，在其他文本顶部的div中间看起来像这样，（用ms绘制编辑：P ）

Answer 1

您应该定位其中一个段落，然后在它们之间为"<h1>Feature not available</h1>"创建TextNode。或者你总是可以在那里但是有一个显示器：无;然后在你需要的时候展示它。

Answer 2

您可以使用绝对定位来实现这一目标。

您可以添加到父＆＃34; lightsBox＆＃34;这种风格

position: relative

然后添加到要将此样式居中的h1元素

position: absolute;
top: 50%;
transform: translateY(-100%);
text-align:center;
width: 100%;

使用JS会是这样的：

document.getElementById("lightsBox").style.position = "relative";
h.style.position = "absolute";
h.style.top = "50%";
h.style.transform = "translateY(-100%)";