1

Tried everything and need some help. I'm trying to have text inside of the hexagon objects, but nothing is working. I can change the background-color of individual hexagons, add URLs, etc. However, I just want to put text inside of them and everything I have tried is not working correctly.

Code example here: https://jsfiddle.net/nullbyte/7dtbpu6f/20/

        <div class="lab_item">      
        <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background-color: black; color: red;">test string</div>

Thoughts? I've looked at this for hours now so maybe I'm missing something extremely easy.

Disclosure: I'm learning HTML/CSS and used this sample for hands on learning and to supplement my reading. Original credit to the creator: https://codepen.io/onediv/pen/npEWrj

nu11byte
  • 13
  • 2

1 Answers1

0

Your text is there, but its being obscured by all your masks because its not centered and all your divs extend way outside the visible hexagon (explanatory image below)

So all you need is to center the text for it to show up. There is many ways to do it, one easy way is to use flexbox (more information here)

so just add

display: flex;
align-items: center;
justify-content: center;

to the div of your element and you are good

Here its a working example:

https://jsfiddle.net/3q89cnkg/

enter image description here

Daniel Cruz
  • 1,437
  • 3
  • 5
  • 19
  • Thank you so much! I should have know because I did change the dimensions and did see some, but I overlooked it entirely. Again, I appreciate the help very much! – nu11byte Feb 13 '22 at 02:09