Css Trouble

Css Trouble centering text or images horizontally with css

#1 spiritcloud

Member

Group: Members
Posts: 69
Joined: 12-December 05

Posted 05 April 2006 - 03:40 PM

I'm having difficulties centering images or text horizontally with CSS. I don't remember it being an issue in the past, but...argh!

Any help is appreciated. I'm sure I'm just looking in the wrong place for the correct code, but I don't have time to look into it anymore.

Nobility is not a birthright--it is a way of life.

#2 Andrew

Bleepin' Night Watchman

Group: Moderator
Posts: 7,329
Joined: 05-December 05
Gender:Not Telling
Location:Right behind you

Posted 05 April 2006 - 04:36 PM

Can you post the code you're using?

Help us help you. If HelpBot replies, you MUST follow step 1 in its reply so we know you need help.
Posted Image

Boredom Software Stop Highlighting Things

#3 nosnhoj#3

Forum Regular

Group: Members
Posts: 245
Joined: 27-May 05
Location:127.0.0.1

Posted 07 April 2006 - 05:24 AM

The easiest way for images is this:

<div align="center">
<img src="image.gif" width="50" height="50" alt="description" />
</div>

It may not be feasible for many many images, but it works right in the html markup and can be styled accordingly in which ever your preffered method of coding your CSS. For other ways of positioning images, there are the "float:" tags, "background-image:" tags, "position:" tags and so on. These take a bit more knowledge for the correct usage, but offer lots of flexibility.

For centering text, try this:

<!--***********************This is the Doctype--Very important***************************-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	  
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" href="3colhf.css" type="text/css" />
	<title>Untitled</title>
<style>
<!--
/**************************Here is the head style***********************/

h1 {
	color:#ffoooo;
	font: bold x-large "Times New Roman", Times, serif;
	text-align: center;
}

--></style>
</head>
<body><!--********************Here is the header placed cleanly in the body*****************-->
<h1>SOME HEADER TEXT</h1>
</body>
</html>

First off, get used to adding a doctype if you want search engine and user friendly markup. I myself prefer External Style Sheets, but adding your style in the "Head" of the page is by no means a bad thing, but there are many advantages to useing the styles externally. Text is the easiest and most flexible content type, because there are many ways to manipulate it to flow the way you want.

You could also align it like the image in the first example, but the whole point of CSS is to seperate the content from the layout. Paragraphs can also be styled in this sme fashion as I show in the 2nd example, as well as any other text that is not already in use.

Those are the basics, maybe you can post a link to the page in question or offer a bit of code as AA states above, and Im sure one of us can help you out.

Hope this helps,

nos :thumbsup:

This post has been edited by nosnhoj#3: 07 April 2006 - 05:26 AM

When I'm right, I'm right....
And when I'm wrong, I could have been right....
So I'm still right, cause I could have been wrong.

#4 spiritcloud

Member

Group: Members
Posts: 69
Joined: 12-December 05

Posted 10 April 2006 - 12:01 AM

I need everything to XHTML standards. I know align="center" still works with most browsers, but it is a deprecated code.

The text-align: center works great. I guess my problem is with images only, not text. Sorry for the mixup.

For anyone else watching this topic, look here for a CSS solution to center images that I came across:

http://www.maxdesign.com.au/presentation/center/

Thanks for your help and advice, nosnhoj and Andrew.

Nobility is not a birthright--it is a way of life.

#5 nosnhoj#3

Forum Regular

Group: Members
Posts: 245
Joined: 27-May 05
Location:127.0.0.1

Posted 10 April 2006 - 08:11 AM

Hello,

Yes, using margin is a great way for making nice fluid resizable containers. That is all I seem to code anymore, especially 3-column, with a footer and a header. The rules of margin in CSS is much like the law of gravity, and if your base content uses margin, or not for that matter, then other elements start getting pushed around after adding new margin rules for content.

I have been using the method below for image layout, and I have grown fond of it.

<style>
<!--
#image {
   width: 200px;
   height: 100px;
   background: #fff url(image.jpg) top left no-repeat;
   }
#image span {
   display: none;
}
-->
</style>

<body>
<div>
	<h3 id="image"><span>Description Goes Here</span></h3>
</div>
</body>

This gives alot of versitility to the placement of images, using the basic CSS terms without having to commit to using margins. Also, the search engines can now read the text that is in place of what once was an image file, and to top it off, people with disabilities get the text read back to them and those who turn off images, can read the description instead of seeing a blank placeholder or whitespace.

It also validates using the XHTML Strict doctype.

Hope this helps

nos :thumbsup:

When I'm right, I'm right....
And when I'm wrong, I could have been right....
So I'm still right, cause I could have been wrong.