Search code examples
htmlcssalignment

centre align with 3 div tags inline

I have 3 div tags inside a parent div. I want to align Every thing in centre.

div-1 - Left Arrow link to prev image set.
div-2 - It will have multiple images.
div-3 - Right Arrow link to next image set.

I am doing the following:

#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }

With this Images are displaying in center as required. But Left arrow and right arrow is displaying at extreme left and extreme right of the screen.

How to display them just besides of images?

Solution

  • I'd use display: inline-block; like this:

    #container{ 
    text-align: center;
}
#div-1, #div-2, #div-3{
    display: inline-block; 
}

    Then if you want to center them also vertically you could add vertical-align: center; to your child divs.