[jay1337]

Hello


Basically I want to have my image aligned to center in a div.

I've used

<div class="preview" align="center">blabla</div>

Which actually works but I still get Validation (HTML5): Attribute 'align' is not a valid attribute of element 'div'


Thanks in advance.

[RudiVisser]

align is deprecated as you know, the easiest way to align a div (or any block element) relative to it's parent controller is to use something like this:

.preview {
    width: 400px;
    margin: 0 auto;
}

Note that for the margin to work properly, you need to have an explicitly set width on your element too.

Alternatively if it's an <img ../> (inline element), then on your parent container (I assume in this case .preview) you can simply set text-align: center, and it's contents will all be central.

This post has been edited by RudiVisser: 19 September 2012 - 12:30 PM

[jay1337]

I've tried what you said and I still can't get the image to the center, here's my code

<div class="preview">
<img id="preview" src="http://bit.ly/2rz3hy" alt="No Image Loaded"/>
</div>

.preview img {
border: 4px solid #efeeef;
padding: 1px;
height: 500px;
}

Adding the things you said didn't change anything except for the width of the image.

[RudiVisser]

It works fine, see example here.

All I added was a width on the actual <img ../> too (CSS) which forced it to render correctly even without the image loading initially.

There was another post like this a couple of weeks back, of which the same code can be used from there too - http://rudiv.se/dic/addio569.htm

[jay1337]

Thank you very much sir, I got it centered now!