4 Replies - 2726 Views - Last Post: 20 September 2012 - 12:50 AM

#1 jay1337  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-September 12

Div/Image align in CSS

Posted 19 September 2012 - 12:20 PM

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.
Is This A Good Question/Topic? 0
  • +

Replies To: Div/Image align in CSS

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1004
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Div/Image align in CSS

Posted 19 September 2012 - 12:30 PM

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

Was This Post Helpful? 1
  • +
  • -

#3 jay1337  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-September 12

Re: Div/Image align in CSS

Posted 19 September 2012 - 01:18 PM

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.
Was This Post Helpful? 0
  • +
  • -

#4 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1004
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Div/Image align in CSS

Posted 19 September 2012 - 01:32 PM

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
Was This Post Helpful? 1
  • +
  • -

#5 jay1337  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-September 12

Re: Div/Image align in CSS

Posted 20 September 2012 - 12:50 AM

Thank you very much sir, I got it centered now! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1