in a css three column setup using the float:left how do I horizontally centre an image inside each column


Tags: css,css-float,center

Problem :

I've taken a look through post on here but seem unable to find a solution that wants to work and I'm wondering if my float:left tags are causing the issue.

Basically I have wordpress blog I'm trying to set using nextgen gallery now for what I wish to do I need to modify way it displays a list of images. into three sections. Centring each image with in the column. Now I've set this using the following code which creates the three columns fine below this its very basic but it does not work on here I assumed I would be able to use the margin:0 auto; but this does not work.

http://jsfiddle.net/locka/dcdkf/

HTML

<div id="wrapper">
<div id="column-left">
<p>LEFT </p>
  <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQtZTDwx3wVJMqWWTlCW8BDZ7fPvQVbRZpILy0NAeHIGaRxcRtR">
</div>
<div id="column-center">
    <p>MIDDLE </p>
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTCgQRoPbKR8WpHtPZfBiPKK6NaNN3vyWqLarsKDDb0zLWd0AID"></p>
   </div>
<div id="column-right">
    <p>RIGHT </p>
   <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcScF65ryaqzfG9gpVrld1CLJ7_5wJOpmH96FRvB4TvnkFaqyloh">
</div>

CSS

* {
margin: 0;
padding: 0;
}

#wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}

#column-left {
width: 280px;
float: left;
background: red;
}

#column-center {
width: 420px;
float: left;
background: GREEN;
margin: 0 auto;

}

#column-right {
width: 280px;
float: left;
background: BLUE;
}

I've basically need to have 3 images in a row these may be 2 size either a landscape or portrait both same hight but different widths I need to centred each image with in it's column. The left and right columns will be the same with as the widest image that way as landscape photo's they will always look like they are left and right aligned and if portraits appear centred in there respect columns. Then the centre column will take up the rest of the space and this will centre all images thus giving equal border left and right. and making them tidy.

I can set up the columns following what looks to be stand way across the net how try as I might can not centre the images.



Solution :

Images are by default inline elements, and will as such obey the text-align CSS rule of its parent. Since text-align doesn't work in your case, it must mean that your images are not inline elements anymore. Probaby there is a img { display: block } somewhere in your CSS.

This means that margin: 0 auto should do the trick. The problem is that you are applying that style on the img's container instead of on the img itself.

So, instead of

#column-center {
  width: 420px;
  float: left;
  background: GREEN;
  margin: 0 auto;
}

use

#column-center {
  width: 420px;
  float: left;
  background: GREEN;
}

#column-center img {
  margin: 0 auto;
}

    CSS Howto..

    How to apply CSS class on current element using jQuery

    How to avoid width calculation, can this be done with just CSS?

    How to mix 100% height with a minimum height

    How to change font on css?

    How to adjust height of the div base on contents? [duplicate]

    How to use JS to target specific domain html links with CSS classes?

    HSS Liquid Layout Issue: how to fill the entire browser

    How to use scss with css modules / postcss inside components

    How do I install and use Groundwork CSS

    How to include PHP code in CSS?

    How do you indent subsequent lines of text using

    How to change placeholder color on focus?

    How do I style an upload input using CSS?

    css only. Click on li, show nested ul and li. Release mouse button, must continue show nested ul and li

    How To Vertically Center Text Over Responsive Video

    how to change button icon on click?

    css: show all floating text (variable font size) on the baseline

    How to changing css on bootstrap button Group

    How to make this geometrical “translation” effect with javascript?

    How to force parent div to expand by child div width/padding/margin/box?

    How to let css selector exclude an element?

    How do I make a certain text style larger?

    How to scale div using css animation in javascript

    How do I change the a border-color on rollover?

    How to position background image horizontally left and vertically center?

    How to implement a table structure using CSS

    how to use CSS clip-path in IE? [closed]

    Css - How to override css for a table cell

    How can I figure out how much a div shifts when a translate:scale is applied?

    How to check if an element has a hover property and do something to another element in css [closed]