text-align:center not working with div elements
50,561
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;
}
Author by
Doctor Parameter
I'm a software developer working in the Aerospace industry living in Melbourne, FL. Recent UCF graduate, December 2013 w/ BS in IT.
Updated on February 12, 2020Comments
-
Doctor Parameter about 4 years
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/
-
Mike Corcoran almost 11 yearsYour 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? -
Doctor Parameter almost 11 yearsI see, I left that code in there from when I was testing. When its removed I don't see any difference.
-
caramba almost 11 years<div class = gallery> will not work you need <div class="gallery"> and the img tag should look like this <img src="pixs.png" alt="" /> maybe this helps a little jsfiddle.net/9gwKc/2
-
Doctor Parameter almost 11 yearsI 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 :(
-
-
Garrett Simpson almost 9 yearsJust adding this comment for emphasis, because I missed the crucial point my first glance -- you must delete
float: left;
before addingdisplay: inline-block;
in order fortext-align
to do what you want it to here.