text-align:center not working with div elements

Question

I've been searching for about 45 minutes and couldn't find a solution for my issue here. I want my gallery class divs (these will get created dynamically) to align them selves in the center of the gallery_container div using only css rules. I'm learning so any explanation would be helpful!

Thanks in advance!

<head>
    <style>
    #gallery_container{
        text-align: center; 
        width:100%;
        overflow: auto; 
        background:orange;  
    }
    .gallery{
        text-align: left;   
        border-style: solid;
        border-width:3px;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px; 
        background:yellow;
        width:335px;
        padding:20px;
        float:left;
        margin:15px;
    }
    .gallery h2{
        margin-top:0;
    }
    .gallery img{
        height:120px;
        width:160px;
        float:right;
    }
</style>

<body>
    <div id ='content_gallery'>
        <h2>Gallery</h2>

        <div id='gallery_container'>
            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h2>Company bowling</h2>
                <h4>Date: June 14, 2013</h4>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>

            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h2>Company bowling</h2>
                <h4>Date: June 14, 2013</h4>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>

            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h2>Company bowling</h2>
                <h4>Date: June 14, 2013</h4>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>
        </div>
    </div>
</body>

and here the fiddle http://jsfiddle.net/9gwKc/1/

Your problem is you've marked the .gallery css class with `display: inline;`. How do you expect to center align elements you've told the browser to stack next to each other? — Mike Corcoran, Jun 18 '13 at 20:11
I see, I left that code in there from when I was testing. When its removed I don't see any difference. — Doctor Parameter, Jun 18 '13 at 20:13
will not work you need
and the img tag should look like this maybe this helps a little http://jsfiddle.net/9gwKc/2/ — caramba, Jun 18 '13 at 20:49
I didn't even notice I forgot the those quotes! but it works like that in chrome (or else I would have caught it). Thanks for the reply! It still doesn't help with my issue though :( — Doctor Parameter, Jun 18 '13 at 21:04

score 16 · Accepted Answer · edited Dec 13 '22 at 18:21

16

This can be done with by using an inline-block display, the float:left will always send the elements to their furthest left possible.

.gallery {
   text-align: left;   
   border-style: solid;
   border-width:3px;
   border-top-left-radius: 40px;
   border-bottom-right-radius: 40px; 
   background:yellow;
   width:335px;
   padding:20px;
   /*float:left; remove this*/
   margin:15px;
   
   /*add this*/ 
   display:inline-block;
   position:relative;
}

edited Dec 13 '22 at 18:21

Skully

2,882
3
20
31

answered Jun 19 '13 at 13:33

Doctor Parameter

1,202
2
15
21

Just adding this comment for emphasis, because I missed the crucial point my first glance -- you **must delete** `float: left;` before adding `display: inline-block;` in order for `text-align` to do what you want it to here. – Garrett Simpson Jul 28 '15 at 23:45

text-align:center not working with div elements

1 Answers1