css - !!css i never understood the "vertically center in css" joke then i tried - devRant

Ranter

Comments

8

Ezard

1992

7y

left: 50%;
top: 50%;
transform: translate(-50%, - 50%);

should do it, shouldn't it?
3

AllenII

1619

7y

@Ezard don't forget position: absolute /* or fixed */
13

AllenII

1619

7y

And now there's always flexbox if you wish
10

Root

82599

7y

@Ezard
Depends on container size
Depends on container positioning
Depends on content size
Depends on siblings
Depends on browser support

@AllenII
Yep! Flexbox makes this simple now 😊
0

PacRat

3990

7y

@GodHatesMe i want it to be vertically centered at the end of "Welcome to devCraft", which has its own class ".devbgtitle"
0

PacRat

3990

7y

@GodHatesMe no, i have the image set toba class inside the sentence
<p>Welcome to devCraft!<img class="centerThis" src="" style="width and height" /></p>
0

PacRat

3990

7y

@GodHatesMe http://github.com/parkcitymedia/...
0

PacRat

3990

7y

@GodHatesMe gonna try - thabks for helping
0

PacRat

3990

7y

@GodHatesMe ahhh ok
1

kinginthenorth

1422

7y

Flex direction: column,
Alignitems: center,
Justify content: center
3

PacRat

3990

7y

@GodHatesMe YO THANKS!
2

Root

82599

7y

Don't rely on vertical-align. That's for table-cell's and behaves strangely/unreliably in other situations.

Use flexbox instead.
Much simpler and will work in every major browser, iirc including >= ie9
0

PacRat

3990

7y

@Ashkin it seems to be working here http://parkcitymedia.github.io/ghPa...
1

Root

82599

7y

@ParkCity it's usable, but capricious.

Just warning you of pitfalls! 😊
0

PacRat

3990

7y

@Ashkin ie9 can suffer, i'm just glad i got it working in a modern browser at least 😂
0

jakobev

2402

7y

hahaha i know that.. i offered much time to find out the best way to get that fixed and done xD
2

tahnik

38991

7y

It's 2017, Use FlexBox, save lives.
2

Dacexi

12036

7y

Read up on flexbox :)
This is a non existent issue in 2017
1

Ezard

1992

7y

@Ashkin I think you forgot to mention that it also relies on planets 4, 5 and 6 being aligned on the previous 2 spring equinoxes
1

Mitiko

6355

7y

Css grid!!!

Related Rants

devRant © 2021 Hexical Labs LLC
Privacy Policy | Terms of Service