Centering an image in Dreamweaver

[Guest]

I am new to Dreamweaver CS4 and to CSS, despite several years of designing table-based layouts in Front Page. I've put a lot of time into training to understand the box model and I'm making headway. I have created a basic 2 column layout from scratch (no template) with a header, a left sidebar, a main content region and a footer. And with floats adjusted, it all works just fine.

I'm running into a problem with what I would have thought would be the simplest of tasks. Inside the main content div, I want a centered image followed below by some paragraph copy, which will be controlled by its own CSS rule. I'm probably missing something obvious, but I can't for the life of me figure out how to center this image. In Front Page, you selected the image and clicked a "center" button - simple enough. But short of manually altering the HTML code with <center></center> tags, I don't' see an option to center an image.

I searched here and found a couple of answers that weren't exactly this same situation and/or that I didn't quite understand. If anyone can help me with this task without showing too much impatience with my ignorance - I'd sure appreciate it.

[Zabeth69]

You can set a style on the image tag like this:

img {display: block; margin: 0 auto;}

Because it's set on the image tag, it will affect all images. If you don't want it to affect all images, just add a class style to the image tag and apply the class when you want to invoke it (one or the other...don't use both of them!).

img.center {display: block; margin: 0 auto;}

Then, you can do this:

<img class="center" src="[path here]" />

when you want to center the image.

Beth

[gokhan999]

Hi Beth -

Can you clarify that? I have scoured DW for the block settings, and wolld prefer to learn how DW inserts this, instead of just hacking up CSS without any background info.

For example, most folks tend to answer questions with a stright piece of CSS code (like above), and I think it would be quite helpful to know how DW invokes these change - where exactly within DW does one go to make the CSS changes described above?

Thanks in advance

PS: I never thought a simple CENTERING issue would be so fully intractable and cryptic - Adobe, are you listening? I have worked Illus and PS since version 1, and this has me stumped.

[Nancy OShea]

A lot has changed in Web Standards since Front Page.  FP used old fashioned HTML styles.  DW is web standards compliant which requires keeping content (html) separate from styles (CSS).

Use the CSS properties panel to a) create an #ID .class or selector name and  b) define it's properties and values.

#ID {property: value}

#header {width: 900px}

.class {property: value}

.center {text-align:center}

selector {property: value}

h1 {font-size: 1em}

Classes are applied to page elements through the HTML properties panel.

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

[gokhan999]

Thank you, Nancy. I'll give it a try.

[Guest]

Here here.

It's not the web standards, it's DW.

There must be some smart programers somewhere who can make a program that would automate putting an image in the center of a web page.

No disrespect intended. I'll learn in time, just like my friend, but don't expect us to go quietly.:>

thanks all,

Mark Flanders

[MurraySummers]

It's not the web standards, it's DW.

That's just wrong.

Sorry....

[Guest]

Thanks for the reply!

I'm glad someone is listening. I do, in fact, defer to your greater knowledge.

I'm willing to accept that the standards insist on CSS, but I had to give a hearty "hurrah" when I read my fellow old-school newbie complain, in a friendly sort of way, about cryptic, non-intuitive and complex methods to center an image in design mode. Surely, a drop down, or a menu item somewhere, perhaps named something like..."align center", wouldn't be too much to ask? (Dear Software: create a new stylesheet and name, place it in the container and call it a div, I don't care, just put the picture in the center of the defined space my curser is now residing. please.)

I still do not understand, after reading the responses to this initial question. I'm sure it involves editing the position in a new stylesheet applied to the object selected...yet the available properties don't include align center? Ok. Fine.  I searched for this topic because I had this issue myself, and had to solve it with tables. I'm certain this isn't the cool way, but it works.

BTW, I lke your picture. I'll try to dig one up for myself so you can see I'm not a bad fellow either. (smile)

all the best,

I'm sure I'll end up eating my words.

Mark

[Guest]

Hello!

These are the best descriptions I can find, although I am having a hard time with this myself.....

http://css-discuss.incutio.com/wiki/Centering_Block_Element

The funny thing about some of these techniques is that they are often quite misleading. For instance - Vertical centering and Horizontal centering, what are they? Geometrically, center explains itself. halfway from a -> b is middle. And also, I haven't stumbled upon 1 techie yet that wasn't an illiterate....

So, if it is any comfort to you, a lot of people(not me) know these techniques very well - They just couldn't explain them to you if their lives depended on it. And the fact that you  tell them that pisses them off like he..! By the way, someone is bound to look for typing errors in this text now, so watch out for that 🙂

[Nancy OShea]

DW has a very handy feature called the Snippets folder where can save re-usable bits of code for insertion into any page when needed.   Snippets allow me to automate many tasks...

http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7bd2a.html

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

[Guest]

Thanks to all for the helpful post. I'm on it.

-

phreaddee123,

Apparently critique of the interface is verbodden?  Let's not drag this into the coder vs. design routine. My code knowledge is just outdated, and I'm opinionated and cranky. I apologize.  But I'm hardly the only one, eh? No worries, really. I don't mind a good rant, but ease up just a tad on the personal bit.

later & thanks for the link.

mf.

[phreaddee123]

opinionated and cranky? sounds like me!

you can criticise the program all you want but you must understand that it cannot think for you and what you put in is what you get out.

was it a tad harsh? perhaps.

warranted? perhaps.

I think everyone's code knowledge is outdated, really, as its forever evolving, I certainly make some pretty stupid errors on occasion.

but if that is the case then you should relish the fact that someone posts you a newer updated code sample, and instead of bagging on it that it doesnt make sense, try and learn how it makes sense. I wasnt intending on being overly personal, and for that I apologise.

[Guest]

It may be as simple as checking the padding. Highlight your div layer or cell and check to see that it's at "0".  I caught myself doing a little head scratching on that one too till I checked my the CSS.

[24whiskers]

That's what I was going to suggest!

Select the image you want to move/center, create a wraparound div tag if you haven't already, then adjust the padding as you like. SIMPLES!!

[Guest]

just chiming in and not trying to "stoke" any fire or flaming at all. But coming from

both sides of the fence, try coding strickly in notepad and you

will apprecaite all the tools and wizards that adobe has worked years on to include in DW. Its not perfect, and there are of course many things that could be imroved upon and I'm sure will be in time, but it really does a very good job at helping even the least tech savvy novice out there to create a fairly well designed site. Just my take anyway.

[Alex Nuta]

I agree with you.

The whole point of DW was to make editing easy and GUI based.

Today it's turning into an IDE, but not a good one.

Frankly I get a lot more mileage out of PHPStorm.

There was I time I could hit a center button in Dreamweaver, and it would center the content. 

If I'm going to code, I might as well go back to Notepad.

[Nancy OShea]

There was I time I could hit a center button in Dreamweaver, and it would center the content. 

True in older versions but the code it produced is outdated now.

[MartyR707]

I totally agree with you!!!  I am migrating from GoLive where there was just a button to click to center an image.  Dreamweaver/Adobe help amazingly tells me

"Your search for centering an image on a web page did not match any documents."

I still cannot find a way to simply center the image on the page.  This is crazy!!

[Nancy OShea]

Short answer:  use CSS. 

Centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

[MartyR707]

Yes, but there are still those of us that are not real familiar with css...... I'm working on it....

[Zabeth69]

One cannot always eat tuna out of a can or cookies out of a box.

Approached deliberately and step by step, css will serve you well. Buttons and single commands might not.

Bon appetit!

Beth

[vrsioffice]

A really simple way is to use the <center> tag.  Put you image inside a paragraph tag and use the center tag.  Make sure to close both the center tag and paragraph tag.

example:

<p><center><img src=http://xxx.com/imgaes/file_name.png alt="Image Title " width="100"  height="100" /> </center></p>

[MurraySummers]

The <center> tag is deprecated, however, so if having your page validate is important to you (and it should be), then that's not a viable solution.  The right approach is as shown below -

<p style="text-align:center"><img src="path_to_image" alt="Image description " width="100"  height="100" /></p>

[Guest]

More of a response to the response, but what the hey.  Just wanted to thank you for answering the question I was researching (that code will solve the problem).  Second to point out that when text can be aligned trivially left, right and centered, and that images can be floated trivially left and right, the lack of an image-center instruction that works like the text-center  instruction seems a bit odd (and no I'm not blaming DW - unless you wrote the most recent standards.)  You might not want to eat tuna out of a can, but being required to extract it with an axe is a mite bizarre.  Even if canopeners ARE deprecated...

[MartyR707]

Hear hear to that!!

<<Just wanted to thank you for answering the question I was researching (that code will solve the problem).  Second to point out that when text can be aligned trivially left, right and centered, and that images can be floated trivially left and right, the lack of an image-center instruction that works like the text-center  instruction seems a bit odd (and no I'm not blaming DW - unless you wrote the most recent standards.)  You might not want to eat tuna out of a can, but being required to extract it with an axe is a mite bizarre.>>