473,320 Members | 1,839 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,320 software developers and data experts.

Centering Images

Is it proper to center images in a <div> by using the text-align: center
property? Or is there a better way?

Jul 20 '05 #1
18 4159
Heath wrote:
Is it proper to center images in a <div> by using the text-align: center
property? Or is there a better way?


Depends; display:block;, display:inline-block;, display:inline;?

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #2
Yeah sorry, the default display:block

Anne van Kesteren wrote:
Heath wrote:
Is it proper to center images in a <div> by using the text-align:
center property? Or is there a better way?


Depends; display:block;, display:inline-block;, display:inline;?


Jul 20 '05 #3
Heath wrote:
Yeah sorry, the default display:block


I think the default is currently a bit 'undifined' in most browsers,
since a image doesn't force a line-break like a <h2> does it? ;-)

display:inline-block; would be the correct syntax, but most browsers
probably have display:inline; with some extra rules and therefore
text-align:center; will work.

If it is true, like you said (or perhaps you did it yourself?) you will
have to use margin:0 auto; in order to center the image, since
'text-align' obviously doesn't applies to block-level elements.
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #4


Anne van Kesteren wrote:
Heath wrote:
Yeah sorry, the default display:block

I think the default is currently a bit 'undifined' in most browsers,
since a image doesn't force a line-break like a <h2> does it? ;-)


I am really not a pro at this, much more of a hobbiest. I should have
been more clear. What I meant was that I didn't explicitly set the
display. But currently in ie 6 when I set two images within the <div>
the images do actually break strangely enough.

display:inline-block; would be the correct syntax, but most browsers
probably have display:inline; with some extra rules and therefore
text-align:center; will work.

If it is true, like you said (or perhaps you did it yourself?) you will
have to use margin:0 auto; in order to center the image, since
'text-align' obviously doesn't applies to block-level elements.


I don't know much about this, but regardless of what I set display to
the text-align centers the image without a problem. I just feel like, as
you have pointed out, it isn't a very good solution.

Jul 20 '05 #5
Anne van Kesteren wrote:
I think the default is currently a bit 'undifined' in most browsers,
All UA's I know default to "inline".
display:inline-block; would be the correct syntax


No, "inline" is the correct display model for images. There is no
"inline-block" in CSS 2 (and 2.1 is still a draft).

--
Spartanicus
Jul 20 '05 #6
Spartanicus wrote:
Anne van Kesteren wrote:

I think the default is currently a bit 'undifined' in most browsers,

All UA's I know default to "inline".

display:inline-block; would be the correct syntax

No, "inline" is the correct display model for images. There is no
"inline-block" in CSS 2 (and 2.1 is still a draft).


I know that, therefore I used 'would'. But UA (like Mozilla) treat image
differently from other elements with display:inline; applied. Take the
following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>image test</title>
<style type="text/css">
img{
height:200px;
width:600px;
}
</style>
<img src="./existing-image.png" alt=""> some inline text

Is it normal that an inline elemnt can have a width and height specified
with CSS? No, it is not.

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #7
Anne van Kesteren wrote:
Is it normal that an inline elemnt can have a width and height specified
with CSS? No, it is not.


It is for replaced elements.

--
Spartanicus
Jul 20 '05 #8
So, I am still trying to get this centering issue figured out. I am
debating between using <img> tags in the html or background: url(); for
images.

I like the background property, because it is easier to work with (in my
opinion). But, I am having problems, because when I use it with a <div>,
<p>, or <h1> then the images stack with the boxes, which is usually
fine. Right now however I have three images that I need to line up
within a <div> container. I would like to have the left image stay on
the left, the center image stay centered, the right image flush right.

Like this:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

It would be easy to do <img align="right"></img>, etc, but I would like
to get this effect using my style sheet.

Any ideas on this?
Spartanicus wrote:
Anne van Kesteren wrote:

Is it normal that an inline elemnt can have a width and height specified
with CSS? No, it is not.

It is for replaced elements.


Jul 20 '05 #9
Oops:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------
Heath wrote:
So, I am still trying to get this centering issue figured out. I am
debating between using <img> tags in the html or background: url(); for
images.

I like the background property, because it is easier to work with (in my
opinion). But, I am having problems, because when I use it with a <div>,
<p>, or <h1> then the images stack with the boxes, which is usually
fine. Right now however I have three images that I need to line up
within a <div> container. I would like to have the left image stay on
the left, the center image stay centered, the right image flush right.

Like this:

It would be easy to do <img align="right"></img>, etc, but I would like
to get this effect using my style sheet.

Any ideas on this?
Spartanicus wrote:
Anne van Kesteren wrote:

Is it normal that an inline elemnt can have a width and height
specified with CSS? No, it is not.


It is for replaced elements.


Jul 20 '05 #10
Heath wrote:
Like this:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

It would be easy to do <img align="right"></img>, etc, but I would like
to get this effect using my style sheet.

Any ideas on this?


I have left the semantics out of the following example, I think you are
smart enough to come up with those on your own.

CSS:
body>div{
background:url() center;
}
body>div>div:first-child{
float:right;
background:url() right;
}
body>div>div:last-child{
background:url() left;
}

XHTML:

<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div/>
<div/>
<div>
</body>

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #11
Anne,

Although I appreciate it, you give me too much credit. Unfortunately, I
still haven't figured out how the body>div thing works. The rest makes
sense.

BTW I am in .be, are you in .nl

Anne van Kesteren wrote:
Heath wrote:
> Like this:

-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

It would be easy to do <img align="right"></img>, etc, but I would
like to get this effect using my style sheet.

Any ideas on this?

I have left the semantics out of the following example, I think you are
smart enough to come up with those on your own.

CSS:
body>div{
background:url() center;
}
body>div>div:first-child{
float:right;
background:url() right;
}
body>div>div:last-child{
background:url() left;
}

XHTML:

<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div/>
<div/>
<div>
</body>


Jul 20 '05 #12
Quoth the raven named Heath:
Oops:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------


Try something like this. Adjust width and height to your images of course.

<div id="boxbanner">
<span class="bannerleft"><img src="smalllogo.gif" alt="" title=""
width="50" height="43" /></span>
<span class="bannerright"><img src="smalllogo.gif" alt="" title=""
width="50" height="43" /></span>
<img src="widelogo.gif" alt="" title="" width="380" height="60" />
</div>
The CSS:

#boxbanner {
border: none;
margin: 0 0 1em 0;
padding: 0;
height: 4em;
text-align: center;
width: auto;
}
..bannercenter, .bannerleft, .bannerright {
padding: 0;
position: relative;
text-align: center;
}
..bannerleft {
float: left;
margin: 1em 0 0 1em;
}
..bannerright {
float: right;
margin: 1em 1em 0 0;
}
--
-bts
-This space intentionally left blank.
Jul 20 '05 #13
Figured out the body>div thing, sorry stupid question. I need to spend
more time in the w3c.

I see how your trying to do, but it really isn't working at all. I can
easily move the image within its container, but to merge the three in
one container or even get them on one line, I have no idea.

I would like to use display:inline or float even, which works very well
when I have an image in the HTML, but moving the image to the .css and
trying to use those methods, just makes them disappear (as I posted in
another question).

Heath wrote:
Anne,

Although I appreciate it, you give me too much credit. Unfortunately, I
still haven't figured out how the body>div thing works. The rest makes
sense.

BTW I am in .be, are you in .nl

Anne van Kesteren wrote:
Heath wrote:
> Like this:

-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

It would be easy to do <img align="right"></img>, etc, but I would
like to get this effect using my style sheet.

Any ideas on this?


I have left the semantics out of the following example, I think you
are smart enough to come up with those on your own.

CSS:
body>div{
background:url() center;
}
body>div>div:first-child{
float:right;
background:url() right;
}
body>div>div:last-child{
background:url() left;
}

XHTML:

<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div/>
<div/>
<div>
</body>


Jul 20 '05 #14
How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

Heath wrote:
So, I am still trying to get this centering issue figured out. I
am debating between using <img> tags in the html or background:
url(); for images.
This is an html question, really. What are the images for? The
middle one is a logo, so probably it should not be a background image.
What about the other 2?
I like the background property, because it is easier to work with
(in my opinion).
But note that you can only have one background image for an element.
Right now however I have three images that I need to line up within
a <div> container. I would like to have the left image stay on the
left, the center image stay centered, the right image flush right.


<div>
<img class="foo">
<img class="logo">
<img class="bar">
</div>

/* css */
..foo {float: left;}
..logo {text-align: center;}
..bar {float: right;}

untested, but should work.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #15


Brian wrote:
This is an html question, really. What are the images for? The
middle one is a logo, so probably it should not be a background image.
What about the other 2?
Is it? I know how to handle the html part without a problem, but it is
with the css I am struggling.
But note that you can only have one background image for an element.

I know, but I really like working with style sheets it save me time and
I can standardize things more easily.
Right now however I have three images that I need to line up within
a <div> container. I would like to have the left image stay on the
left, the center image stay centered, the right image flush right.

<div>
<img class="foo">
<img class="logo">
<img class="bar">
</div>

/* css */
.foo {float: left;}
.logo {text-align: center;}
.bar {float: right;}

untested, but should work.

On the first try it doesn't seem to work, but I will have to work with
it a bit more.

I guess I need to hit the w3c, I guess I need to figure out when I want
to use img vs. background.

Jul 20 '05 #16
Heath wrote:

Brian wrote:
This is an html question, really. What are the images for?


Is it? I know how to handle the html part without a problem, but it is
with the css I am struggling.


What is the *function* of the images? If they are content, then put
them in the html. If not, then using css, which is optional, may be a
better solution.
[first attempt snipped]
untested, but should work.


On the first try it doesn't seem to work


Stupid me; I should have tested it. Try this instead.

<STYLE TYPE="text/css">
#foobar {text-align: center;}
.foo {float: left;}
.bar {float: right;}
</STYLE>

<DIV id="foobar">
<IMG SRC="left.jpg" class="foo" ALT="">
<IMG SRC="right.jpg" class="bar" ALT="">
<IMG SRC="logo.gif" ALT="company name">
</DIV>

....using appropriate alt texts, of course.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #17
Heath wrote:
I see how your trying to do, but it really isn't working at all. I can
easily move the image within its container, but to merge the three in
one container or even get them on one line, I have no idea.

I would like to use display:inline or float even, which works very well
when I have an image in the HTML, but moving the image to the .css and
trying to use those methods, just makes them disappear (as I posted in
another question).


Maybe if I use less complicated selectors and more complicated (X)HTML:

CSS:
div#box{
background:url() center;
}
div#right{
float:right;
background:url() right;
}
div#left{
background:url() left;
}

HTML:

<div id="box">
<div id="right"></div>
<div id="left"></div>
<div>

Since the previous example only would have worked in Mozilla and was
just there to show you how something could be done, here a less
complicated example.

There are some things you need to add yourself like 'height' and 'width'
of which I don't know the values.
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #18
(trim)

Thanks for your help Alan, Anne, Brian, Jim, and Neal. I think that
someone should put a sign on this group that reads the following: Follow
the posting rules and there are some of the most helpful individuals
over here.

This solves some issues that I have been struggling with. I really
appreicate it.

Jul 20 '05 #19

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

Similar topics

19
by: George Ziniewicz | last post by:
.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table...
5
by: Abs | last post by:
Hi! I'm having a little problem with my site. I know how to center DIVs using the "margin: auto" thing. But I'm unable to center two images. I used the "text-align: center" hack with no results,...
3
by: rsteph | last post by:
I'm using two divs to create a shadowed-box type effect. Within the top div I want to put an image. I can get the image to center right to left, but not top to bottom. I'm making a series of boxes,...
3
by: Troy Piggins | last post by:
How do you center images within a <div- or any other element for that matter? If I try margin-left: 50%; it's only the left hand side of the image that is on the centerline, not the center...
1
by: andre1011 | last post by:
I have two arrow images that need to be centered horizontally inside a div tag below another picture of a painting for a slide show, How should I proceed?
1
by: Superflu | last post by:
Hi guys, I need some help with this ... I have 2 clickable images and I want them centered right next to each other, and on the bottom of the page, using CSS. How should I do this? I can't...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.