在canvas元素內移動文本並使其居中

Question

我正在嘗試將帶有文本hallo1和hallo2 div移動到我的canvas元素上並使其居中。
是否有人對如何實現這一目標有想法？

下面是代碼：

<canvas id="canvas1">hi</canvas>

<div> 
    hallo1
</div>
<div>
  hallo2
</div>
<canvas id="canvas2"></canvas>

<div> 
    hallo1
</div>
<div>
  hallo2
</div>
<canvas id="canvas3"></canvas>

<div> 
    hallo1
</div>
<div>
  hallo2
</div>
<canvas id="canvas4"></canvas>

<div> 
    hallo1
</div>
<div>
  hallo2
</div>

Answer 1

將所有內容放入div並使用text-align:center; 。 如果仍然需要它在屏幕float:left;使用float:left; ， 像這樣：

小提琴

#everything {
  text-align:center;
  float:left;
}

Answer 2

一種可能的情況是，無需修改布局即可簡單地調整位置：

div {
    position: relative;
    left: 80px;
    top: -125px;
}

小提琴

適應不同文本寬度的版本是使用13ruce1337答案並垂直調整

#everything {
    text-align:center;
    float:left;
    position: static;
}
div {
    position: relative;
    top: -125px;
}

我必須重新定義所有位置，因為文本div的樣式會對其進行修改

小提琴2