登录 | 注册 | FAQ
Anonymous

Center image

+ 发表回复

5 篇帖子 分页: 1 / 1


Center image

lisaja » 周五 10月 01, 2010 7:11 pm

How do I put a image in the center of the browser - no matter the size of the browser window. Can I do that with CSS?

Thanks,

Lisa
头像

lisaja

  • 帖子: 6
  • 注册: 周二 9月 21, 2010 2:24 pm

Re: Center image

HTML.net » 周六 10月 02, 2010 5:52 pm

Yep, CSS is right way to do that:

<img src="image.png" style="display:block; margin-left:auto; margin-right:auto;" />

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Center image

jasikapetro » 周五 10月 08, 2010 11:16 am

<img src="./image/myImage.png" alt="My Image" style="width:100px;height:100px;float:left;margin:0 auto;" />
That will centre your image.
头像

jasikapetro

  • 帖子: 4
  • 注册: 周五 10月 08, 2010 10:48 am

Re: Center image

HTML.net » 周日 10月 10, 2010 8:12 pm

It's a bug in Internet Explorer 8. I think you can get around it by putting a width on the image:

<img src="image.png" style="display:block; margin-left:auto; margin-right:auto; width: 100px;" />

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Center image

frank » 周三 12月 22, 2010 7:24 pm

<img src="image.png" style="width:100px;margin:0px auto;" />
Same answer as Andreas, but using the shorthand property for margins. Also you want to always specify the width whenever you're using margin:0px auto; otherwise the browser has no way of calculating what should be margin-left or margin-right.

-Frank
头像

frank

  • 帖子: 18
  • 注册: 周二 11月 30, 2010 7:37 pm


+ 发表回复

分页: 1 / 1