- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi there, I’m trying to vertically center a div but I can’t achieve that. I’ve tried using:
display: table-cell;
vertical-align: middle
It cuts the content div, not even the overflow works. Do you know where’s the problem?
Here’s the link to the page. I need the tree circles to be center vertically: http://niclamarino.altervista.org/Layouts/TerreDelBuono/splash-page.html
What I think you actually want is to center the whole ul
that contains all the divs vertically…don’t you?
There’s a few ways to do that.
https://css-tricks.com/centering-css-complete-guide/
By the way all those break tags [ br/
] used for spacing…don’t do that. It’s very poor practice and there are much better options available
So something like this:
.ch-grid {
/* margin: 20px 0 0 0; */
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
try this:
http://codepen.io/anon/pen/aOjOWo.html
I’ve solved using the Paulie_D code, using top:45%;
Thank you very much!
Another possible solution is to use Flexbox. See A Complete Guide to Flexbox.
See the Pen le terre del buono at CodePen, forked from @nfewd‘s pen and modified to use Flexbox. Only .ch-grid and .ch-grid li have been modified.
Indeed, I’m loving flexbox…I recommend it but my only concern right now is the level of browser support as it’s IE10+.
Now that might be fine depending on the audience but my feeling right now is that it might be a little premature.
I guess feature detection would be the optimal method with suitable fallbacks.