divの中に他のテキストがあるときに中央揃えのテキスト

Question

これは愚かな質問のように聞こえるかもしれませんが、ここになります 私は中央に欲しいです。

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"; 

私は他のテキストの上のdivの真ん中に、 "利用できない機能"テキストを揃えたいですこのように見える（msペイントで編集：P）

Answer 1

これは、絶対配置を使用して達成できます。

あなたは親「lightsBox」

position: relative 

が次にあなたはJSはこのようなものになるだろう使用してこのスタイル

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

をセンタリングしたいのh1要素に追加し、このスタイルに追加することができます。

を

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

Answer 2

段落の1つを対象にして、それらの間に"<h1>Feature not available</h1>"のcreateTextNodeを作成する必要があります。または、あなたはいつでもそこにディスプレイを持つことができます：なし;それが必要なときに表示してください。