Streaming live at 10am (PST)

Text centered in a div


#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:

Best,
Christopher


#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


#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.