Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Centering a Div Horizontally - Problems
I am trying to center a div Horizontally. I have it working now at my site where the main image is centered.
The HTML is:
<div class="img_display">
<img src="http://www.blahblah/1.jpg" />
</div> The CSS is:
.img_display {
text-align: center;
margin: 20px auto 0 auto;
}
.img_display img {
border: 1px solid #BBB;
padding: 10px;
} I am trying to give the image a drop shadow, using code from the book CSS Mastery, a la Clagnut example. The drop shadow is fine and I have cleared the float, but I can’t get the added containing div to center.
The new HTML:
<div class="gallery_wrap clearfix">
<div class="gallery_display">
<img src="http://www.blahblah/1.jpg"/>
</div>
</div> The new CSS:
.gallery_wrap {
text-align: center;
margin: 20px auto 0 auto;
}
.gallery_display {
background: url(../images_core/drop_shadow.gif) no-repeat bottom right;
float: left;
line-height: 0;
}
.gallery_display img {
background: #FEFEFE;
padding: 4px;
border: 1px solid #BBB;
position: relative;
left: -5px;
top: -5px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} How can I center the div class=“gallery_wrap”? The margin:0 auto and text align center does not work.
Art Rogue – Fine Art Photography
Offline
Re: Centering a Div Horizontally - Problems
you can’t center a block element that takes up the width of the entire screen (or whatever is containing it). try adding a width if possible.
Offline
Re: Centering a Div Horizontally - Problems
Adding a width in px did work. I can’t figure out why it worked before without specifying a width. It seems the css added when creating the drop shadow is making the centering a problem. I would like to give the div class=“gallery_wrap” a with of %100 just to be flexible.
Could it be something with declaration of position relative of the float be the problem and if so, can I work around that without having to specify a pixel width?
Art Rogue – Fine Art Photography
Offline