Centering images using CSS

windows

Guest
Hiya y'all. Just wondering how to center images without haveing to use position:absolute cos as you can see I'm making a right **** up of this one - <!-- m --><a class="postlink" href="http://www.namik.co.uk.You">http://www.namik.co.uk.You</a><!-- m --> could do this:

...
<style type='text/css'>

.a {text-align: center;}

</style>

</head>

<body>
<p class='a'><img src=http://www.webdeveloper.com/forum/archive/index.php/"scratchlogo.jpg" width="327" height="102" id="logo" alt="namik" /></p>

<p class='a'><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.html"><img class="a" src="Negativesub.jpg" width="512" height="340" id="negative_band" alt="negative" /></a></p>

...That worked a treat. Thank you.Originally posted by NogDog
You could do this:

...
<style type='text/css'>

.a {text-align: center;}

</style>

</head>

<body>
<p class='a'><img src=http://www.webdeveloper.com/forum/archive/index.php/"scratchlogo.jpg" width="327" height="102" id="logo" alt="namik" /></p>

<p class='a'><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.html"><img class="a" src="Negativesub.jpg" width="512" height="340" id="negative_band" alt="negative" /></a></p>

...


Two questions for you, NogDog -

1) that stuff I just quoted isn't in PHP code, is it? Or is it? Doesn't look like it to me; so what does "PHP" mean in the quoted material?

2) Are you saying I could center an image by using

.a {text-align: center;}

in my (external) CSS file?

I have related questions; so much to learn and make work together! (new thread, I think, to come).

Fri, 31 Dec 2004 09:22:01 (PST)NogDog just used the Forum's PHP Code block. It provides syntax highlighting, but he could have used [ code ] as well.

Text-align:center; will center all inline elements. This includes, but is not limited to, images, spans, text withing block-level elements, labels, inputs, buttons, ect.

margin:auto; will have the affect of centering block-level elements like <div>, <p>, <fieldset>, ect.Originally posted by MstrBob
NogDog just used the Forum's PHP Code block. It provides syntax highlighting, but he could have used [ code ] as well.

Text-align:center; will center all inline elements. This includes, but is not limited to, images, spans, text withing block-level elements, labels, inputs, buttons, ect.

margin:auto; will have the affect of centering block-level elements like <div>, <p>, <fieldset>, ect.

Good heavens! Thanks for the info on the code block thing; I think I understand what you're saying there.

I can see I'll use a lot of text-align: center; though it also has its hazards! so I won't overdo it, but probably use classes for that (I'm just learning about classes).

And gradually, I'm learning to identify block-level elements, too - have to learn this stuff sort of all-at-once to make it work! With help like yours, though, it becomes fun! I'm so much less disoriented - have a little something to grab onto!

I'm not sure which experiment to do next, since one thing affects another! But by the end of the day, something will have changed; I think I'll work with <div> </div> stuff next; never did that, but I seem to have at least a bit of intuitive comprehension of those ideas, which I haven't much about any of the others!

Off to experiment. That is, to learn!

Fri, 31 Dec 2004 09:52:54 (PST)
 
Back
Top