在canvas元素内移动文本并使其居中

Question

I am trying to move my div s with the texts hallo1 and hallo2 to my canvas element and make it centered.
Does anyone have and idea on how to achieve this?

Below is code:

<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

put everything in a div and center it with text-align:center; . If you still need it to be on the left side of the screen use float:left; , like this:

fiddle

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

Answer 2

One posibility without modifying your layout is simply adjusting the position:

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

fiddle

A version that adjusts to different text widths is to use 13ruce1337 answer and adjust it vertically

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

I have to redefine everything position, because the style to the text div would modify it

fiddle 2