Is it proper to center images in a <div> by using the text-align: center
property? Or is there a better way?
18  4216 
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.annevankest eren.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.annevankest eren.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:inli ne-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:inlin e-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=is o-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.annevankest eren.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. 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 vertical align doesn't work in Mozilla):
http://zintel.com/homepics.html
I've used combinations of <center>, style align 'center', table cell align, valign and height='100%' to get what I want, but I wonder if CSS can do it by itself.
|
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, too.
Here is my site:
http://project.fotografist.com/
|
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, and the images in them aren't all the same size. So I've sized the boxes to mach the largest of them, and I want to center them, so those that are smaller will be in the middle of the first div.
Here's the code on the page:
<table border="0"...
|
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 of the image.
margin-left: 50%;
margin-right: 50%;
|
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 seem to figure it out.
To clarify, this is the HTML (strict 1.0):
<div id="images">
<a href="#"><img alt="one" src="one.gif" /></a><a href="#"><img alt="two" src="two.gif" /></a>
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
| | |
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
