How can I get the images in my carousel to center?


Tags: css,carousel

Problem :

I have an image carousel with images in it, and I can't figure out why the images won't centre within it. Here's what I currently have for my CSS as it relates to the content of the carousel:

.blueimp-gallery { width: 90%; height: 90%; margin-left: auto; margin-right: auto; align: center;}

Normally when the height and width are set to 100% the images fill up the carousel all the way and are centred within it. However I don't want them to be 100%, and when I change them to a smaller amount they align to the top left of the carousel instead of the middle. How can I fix this?



Solution :

To be certain I would need more code, but it seems you're applying your CSS to the gallery, not the images in it...

if you change .blueimp-gallery to .blueimp-gallery img it should center the images


    CSS Howto..

    When I click on each button its shows me the same content of the first button

    How to make each element to be fully independend with CSS?

    How to get the Apple Javascript Split Flap Counter to run on pure CSS

    How do I insert tag using :after css property?

    PHP How to not cache generated HTML but cache static data like images/js/css

    how to get true css property names from CSSStyleDeclaration object?

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    How to make slanted CSS arrow pointing to a div

    IcoMoon App icon fonts are shown as 

    How can I use CSS to show and hide multiple elements at once?

    How can i execute two effects on .mousenter THIS?

    Multiline content in a DIV, display only the first line, if clicked, show all and contenteditable

    How to change the color of a textfield dynamically in sencha?

    How to keep height of parent div with absolute positioned img inside?

    How to functionalize countdown?

    Double Scroll Bars kept showing in Windows Broswers

    How to layout html CSS in this way? [closed]

    How to limit width of

    -

    tag by length of content

    How can I override CSS inherited properties

    How to align this CSS menu to the right of its containing div?

    How to get different class selectors using nth-child in css

    How to create a circumference with CSS? [closed]

    how to hide the border of tag (when the img load error)

    How to handle the html and css of one side image and other side content and vice versa

    How to get similar effect on menu

    how to replace text with image in html/css

    How can I fix this parralax

    How to use JSF generated HTML element ID with colon “:” in CSS selectors?

    How do I change the background on mouse over immediately?

    how to change the css in td on mouse click using javascript