Vertical centering of single- and multiline-text - problem

HTML-CSS
1

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). :slight_smile:

Thank you very much in advance!!! :wink: :slight_smile:

2

Flex makes it easy, but if you don’t want that, then you should try position

Make li as position relative and make a as absolute and using transform, bring it to center along x and y axis

3

Thanks, I tried it as you wrote:

li with position:relative
and
a with position: absolute and transform: translate(-50%, 50%)

It centered the single-line text, but the problem in case of multi-line text stays. :frowning: :frowning:

4

EDIT: You can use overflow-wrap: break-word and hyphens:auto

5

If I´m not mistaken, this doesn´t solve my problem with the position of multi-line text. :frowning:

6

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

7

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. :wink: