Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 03-22-2012, 10:48 PM   #1
Solid State Member
 
Join Date: Feb 2012
Location: United States
Posts: 15
Default How to center image with CSS

I am trying to center an image with CSS instead of using <div align="center">

My code looks like this:

<head>
<style type="text/css">
.center {
margin:auto;
width:100%
display:block;
}
</style>
</head>

<body>
<div class="center">
<img src="image.png">
</div>
</body>

Everything I read says margin:auto; should center it. Then I read you had to make it a block for it to center, and that isn't working either. Anyone know?

EDIT: text-align:center; worked perfectly. I guess that's how you do it.
__________________

Mike Anthony is offline   Reply With Quote
Old 03-27-2012, 11:15 AM   #2
j03
~~~~~~~~
 
Join Date: Jan 2005
Location: Wales
Posts: 5,556
Send a message via MSN to j03
Default Re: How to center image with CSS

You need to give your image an absolute width, in pixels. It should work fine.
__________________

j03 is offline   Reply With Quote
Old 04-26-2012, 10:49 AM   #3
Baseband Member
 
engrmudasir's Avatar
 
Join Date: Dec 2011
Location: Pakistan
Posts: 23
Default Re: How to center image with CSS

Quote:
Originally Posted by j03 View Post
You need to give your image an absolute width, in pixels. It should work fine.
Absolutely fine but i think that you need to Align You image in CSS declarations.
Example:

img{
width:30
height:30
align: center}
now in HTML where ever you will use <img src="abc.jpg" /> It will align it to the center of the page.
engrmudasir is offline   Reply With Quote
Old 05-31-2012, 11:33 PM   #4
Baseband Member
 
Join Date: May 2012
Location: Canada
Posts: 24
Send a message via Yahoo to PC Expert Send a message via Skype™ to PC Expert
Default Re: How to center image with CSS

If you remember the old way (without the magic of CSS), it was something like this:

<p align="center">centered image here</p>

Look familiar? There’s also:

<center>centered image here</center>

Of course, you don’t want to do that. Both ALIGN and CENTER here are deprecated- and besides, the beauty of CSS is that it’s supposed to make our lives easier, right? Now let’s say I want all of the images in my blog posts to be centered nicely. Instead of having to select each one and applying the dreaded ALIGN or CENTER, all I’d have to do, really, is this:

.post-body img { display: block; margin-left: auto; margin-right: auto }

I want to give you a quick explanation of what we’re doing here. The truth is that although I’ve been using that bit of code for a long time, I never thought to ask exactly how it worked. So here’s what this does:

First, it makes the image into a block – thereby making it unnecessary to add any additional <div> or <p> tags around it. Then it tells the browser displaying it to set left and right margins to auto.

When you set these to “auto”, what you are actually doing is telling the browser that you want left and right margins to be equal – which is really another way of describing centering.
PC Expert is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 02:38 AM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0