Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering vertically

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #35267
    XaviJr
    Participant

    I have a slider on my homepage and I want this slider to have full width but fixed height.

    So my slider have width:100% (so as the images) and overflow:hidden and my question is: how can I center vertically the images?

    Thanks in advance.

    #91020
    WJvanTilburg
    Member

    Several ways you can accomplish this.

    In this jsfiddle example, i used the position: absolute, with a top: 50% and a margin-top that has a negative -(height / 2)px

    On this site (http://blog.themeforest.net/tutorials/vertical-centering-with-css/) is an interesting article about it using several methods.

    I hope it is any help for your solution

    ~ Wouter

    #91021
    stevedeer
    Member

    WJ… can I jump in here as I’m learning css. On your fiddle you write in the css… “div#container”, why have not just written “#container” and applied that to the div, or does it do something else when written that way?

    thanks in advance

    steve

    #91022
    WJvanTilburg
    Member

    No problem stevedeer,

    If you write div#container, the style will only apply to the id container that belongs to a div. So let’s say you use

    the style wont be applied, because we wrote div#container and therefor made it a div only style.

    It’s not at all required to do it this way, it’s just a habit now and i find it easier ;)

    ~ Wouter

    #91027
    XaviJr
    Participant

    Thank you, this is a great resource. I’m still looking for the best way but I think this is all I need.

    #91064
    Mottie
    Member

    Have you read this article?

    #83446
    XaviJr
    Participant

    My problem is a little different because the image I want to center vertically I bigger in height than the container.

    Here’s the example: http://imageshack.us/photo/my-images/526/exampleqf.jpg/

    So the blue area is the slider and the green is my images that can have the same or bigger height than the slider. What I want is not showing the top part of the image but the middle.

    But I will try that way too, Mottie. I already had read that article but didn’t remembered. Thank you.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.