473,224 Members | 1,626 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 software developers and data experts.

Centering image in div

Hi,

I have a div with an image inside it. The image needs to be centered in
the div. I thought I could do this by setting the image's margin to
"auto auto", but it seems to do nothing. What am I missing here?

Thanks,
Aaron

P.S. Here are the exact styles I'm using:
..imageholder { width: 100px; height: 50px; border: 2px solid black;
float: right; margin-right: 20px;}
..cat-table td img {margin: auto auto;}

Jul 20 '05 #1
7 6781
Aaron skrev:
I have a div with an image inside it. The image needs to be centered in
the div. I thought I could do this by setting the image's margin to
"auto auto", but it seems to do nothing. What am I missing here?


Use text-align: center

auto works only on block elements, not inline elements.

And if you want to use margin: auto on block elements, you will
have to set width on it.
--
Knud
Jul 20 '05 #2
Allright, I set the style for the image to {display: block; margin:
auto;}. Shouldn't this then center it in the div it's in? It does
center it horizontally, but it remains at the top vertically. Any ideas?

Thanks,
Aaron

Knud Gert Ellentoft wrote:
Aaron skrev:

I have a div with an image inside it. The image needs to be centered in
the div. I thought I could do this by setting the image's margin to
"auto auto", but it seems to do nothing. What am I missing here?

Use text-align: center

auto works only on block elements, not inline elements.

And if you want to use margin: auto on block elements, you will
have to set width on it.


Jul 20 '05 #3
Knud Gert Ellentoft wrote:
Use text-align: center


VERTICALLY
Jul 20 '05 #4
Els
Timo Nentwig wrote:
Knud Gert Ellentoft wrote:
Use text-align: center


VERTICALLY


No need to shout. At the time Knud responded, the OP hadn't
stated yet that he meant vertically.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #5
Aaron wrote:
Hi,

I have a div with an image inside it. The image needs to be centered in
the div. I thought I could do this by setting the image's margin to
"auto auto", but it seems to do nothing. What am I missing here?

Have you tried "vertical-align"?

--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)
Jul 20 '05 #6
Els wrote:
No need to shout. At the time Knud responded, the OP hadn't stated yet
that he meant vertically.


Oh, sorry, my fault. I just posted a similar question shortly ago
("centering vertically" :-)

I apologize.

Jul 20 '05 #7
Aaron wrote:
Shouldn't this then center it in the div it's in? It does center
it horizontally, but it remains at the top vertically. Any ideas?


Sure. Search the group archives. The topic of centering --
horizontally and vertically -- has been discussed *numerous* times.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Greg Shannan | last post by:
I normally centre an image using a <p align="center"> ... </p> format, but I understand that this is "deprecated" in the latest standard in favour of styles. The problem is that I cannot find a...
18
by: Heath | last post by:
Is it proper to center images in a <div> by using the text-align: center property? Or is there a better way?
2
by: Ryan W Sims | last post by:
I'm having trouble with centering in IE... http://www.ryanwsims.com/koh/ The image should center over the text. It does in Firebird, but not in IE for some reason. If you look at ...
17
by: Applebrownbetty | last post by:
Hi, I'd like to append/amend the following code from the Dreamweaver extension "Open Picture Window Fever" for the ability to center the PopUp window: By default, it allows the window to be...
6
by: Jerry Camel | last post by:
I want to center an image on the screen and have text centered over the image. What's the best way to do this? I've been playing with style tags and I can get the stuff to center automatically...
3
by: The New iSoftware Company | last post by:
Any one know how to center a control like the image editors on the market (fireworks/photoshop/etc)? This way should support scrolling and zoom. Is there a way to draw overlays that is inverted...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
2
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated...
1
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...
4
by: harryusa | last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.