テキストを中央揃えにする方法ボタンの上に

Question

ボタンをテキストにしたいのですが、その上に別のテキストを配置することができます。ここに私が欲しいものを表示するには、擬似デモです：

各ボタンOFFとNextは、テキスト、それぞれText over OffButtonとText over NextButtonが関連付けられています。私は既定のボタンテキスト（この場合はOFFとNext）については言及していませんが、それらのすぐ上のテキストについては言います。つまり、Text over OffButtonとText over NextButton

Answer 1

divの各ボタンとテキストを折り返して中央揃えにします。

.button-wrapper {text-align:center;display:inline-block; margin:10px;} 
 
button {padding:10px; background-color:green;color:white;}

<div class="button-wrapper"> 
 
<p>Text over button 1</p> 
 
<button type="button">Click here</button> 
 
</div> 
 
<div class="button-wrapper"> 
 
<p>Text over button 2</p> 
 
<button type="button">Click here</button> 
 
</div>