Text centered in a div

Design help General
1

I’m trying to get text in a div to always be centered (top to bottom evenly) and I’m having a bit of difficulty!

Here is what I’m working with: midtown-antiques.webflow.io
on the homepage the three blocks on the bottom

https://preview.webflow.com/preview/midtown-antiques?preview=38cbfc8a92582ffff552956290339beb

@Sabanna since you’re amazing, would you happen to know?

2

Hello @Quantumgo,

First of all I recommend you remove the “2” and “3” tags from the second and third tiles considering they are not necessary to differentiate how these 3 tiles look (the background image and text can be different across your 3 panes under the same class assignment).

Now, make the following changes to the hoverdiv element:

  • Consider reducing the inner padding to around 50-60 rather than 70
  • Remove the 5vh inner padding from top and bottom (click it, then click Remove this style)
  • Select Flex under Display Settings (the one with the 3 boxes)
  • Apply the following flex settings:

Here is your final result:

899×307 213 KB

Best,
Christopher

1 Like
3

I think I may be doing something wrong as it’s not working for me :thinking:

4

Hello, Liz.

Your text blocks are centered vertically, but they all different height. It makes it look that they are not aligned. I think what you wanted is justify text vertically, but I don’t think it is possible. At least I don’t know how to do this.

So, I would suggest simply adding top padding on a divs and align text to the top.

5

@sabanna but when I do this it doesn’t keep them centered when you make the screen bigger and smaller (above tablet size)

6

What I would do:

  1. Set font size 1.2 vw with line-height 1.6 points
  2. make text vertical align to top (not center)
  3. make top padding on div 6 vw (not vh)

Sure it is settings for the desktop and for the tablet it will need some adjustments, but I think you understand the principals

Cheers,
Anna

7

@sabanna I think I did something wrong, the 1.6PT line height made all of the text overlap each other.

I just left the line height auto and it looks like it worked I think!

8

points is NOT PIXELS :slight_smile: it is “-” sign

1 Like
9

Oh never mind I got it!

10

@sabanna since I have you here, how can I make the caption area on a lightbox bigger so it can fit the whole caption in it?

11

Add this CSS to the header custom code area :slight_smile:

<style>

.w-lightbox-caption {
    white-space: normal !important;

</style>
12

@sabanna, looks like it worked partially for one but not all the way. :flushed:

13

I guess there is a maximum quantity of characters for the caption. It’s set somewhere in the lightbox script probably. Sorry, don’t know how to control it :confused:

14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.