Is it proper to center images in a <div> by using the text-align: center
property? Or is there a better way? 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/>
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;?
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/>
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.
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
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/>
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
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.
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.
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/>
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>
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.
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>
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
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.
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
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/>
(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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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...
|
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,...
|
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,...
|
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...
|
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?
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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....
|
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
|
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...
| |