Позиционирование текста над холстом: относительное/абсолютное позиционирование? г-индекс?

Question

У меня есть два графика пончика с использованием Chart.js и двух элементов div. Я пытаюсь позиционировать div сверху диаграмм, но мне не повезло. Следует отметить, что диаграммы бок о бок.

<div id="breakdownWrap">hi</div> 
<div id="scoreWrap">hello</div> 
<canvas id="reviewBreakdown" width="150" height="150"></canvas> &nbsp; 
<canvas id="reviewScore" width="150" height="150"></canvas> 

Я понимаю, мне нужно DIV в качестве родительского элемента, но при этом теряет свое форматирование (графики больше не может быть бок о бок). Я пытаюсь получить текст мертвого центра в каждом графике.

Fiddle: https://jsfiddle.net/of5a8ub5/

Answer 1

Я работаю с JSFiddle, изменение структуры (HTML), добавив некоторые CSS, и я получаю результат, который вы хотите.

HTML:

<div id="breakdownWrap" class="wrapper"><div class="text">hi</div> 
<canvas id="reviewScore" width="150" height="150"></canvas> 
</div> 
          <div id="scoreWrap" class="wrapper"><div class="text">hello</div> 
<canvas id="reviewBreakdown" width="150" height="150"></canvas> 
</div> 

CSS:

.wrapper{ 
    position: relative; 
    display: inline-block; 
} 

.text{ 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    line-height: 150px; 
} 

canvas{ 
    position: relative; 
    z-index: 1; 
} 

Посмотрите и скажите мне, если это решит вашу проблему.

https://jsfiddle.net/lmgonzalves/of5a8ub5/3/