Hi to all,
please could you help me with vertical centering of my text (single- and multi-line) inside of boxes “a” inside of “li”?
Here is the link to my project: https://codepen.io/mmajam/pen/PBBoeg?editors=1100 - those “boxes” are in the section “We can organize…”.
I know that I could use flexbox for this, but I wanted to use just float here - so if you could give me advice how to center the text vertically when I use this structure, I would be happy (I´m really curious, how to solve this, because I tried many things already).
Thank you very much in advance!!!
Flex makes it easy, but if you don’t want that, then you should try position
li as position relative and make
a as absolute and using transform, bring it to center along x and y axis
Thanks, I tried it as you wrote:
position: absolute and
transform: translate(-50%, 50%)
It centered the single-line text, but the problem in case of multi-line text stays.
EDIT: You can use
overflow-wrap: break-word and
If I´m not mistaken, this doesn´t solve my problem with the position of multi-line text.
You should apply this after the position and you wanted your multiline text to be contained within the block, right.? If not that, you must set a specific font size for the anchor elements or increase the width of the container
I tried it, but it didn´t work. So at the end I decided to use flexbox, even when I didn´t want to use it here at first. However, thank you for your advice.