Highlighted

Centering an image in Dreamweaver

Community Beginner ,
Mar 21, 2010

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Sadly, this is a very old thread and answers provided 6 years ago are irrelevant and outdated today.

In Bootstrap documents, use the built-in centering classes.

               <div class="col-md-6 center-block text-center">

               CONTENT INSIDE THIS DIV IS CENTERED

               </div>

In all other documents, use a custom CSS class.

               .logo {display:block; width:auto; margin:0 auto}

               <img class="logo" src="your_logo.jpg" alt="xyz logo">

Nancy O.

TOPICS
How to

Views

151.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Centering an image in Dreamweaver

Community Beginner ,
Mar 21, 2010

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Sadly, this is a very old thread and answers provided 6 years ago are irrelevant and outdated today.

In Bootstrap documents, use the built-in centering classes.

               <div class="col-md-6 center-block text-center">

               CONTENT INSIDE THIS DIV IS CENTERED

               </div>

In all other documents, use a custom CSS class.

               .logo {display:block; width:auto; margin:0 auto}

               <img class="logo" src="your_logo.jpg" alt="xyz logo">

Nancy O.

TOPICS
How to

Views

151.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 21, 2010 0
Valorous Hero ,
Mar 21, 2010

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2010 2
Community Beginner ,
May 09, 2010

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2010 1
Adobe Community Professional ,
May 09, 2010

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2010 1
Community Beginner ,
May 09, 2010

Copy link to clipboard

Copied

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


Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2010 0
Community Beginner ,
Feb 16, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2011 1
LEGEND ,
Feb 16, 2011

Copy link to clipboard

Copied

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

That's just wrong.

Sorry....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2011 0
Adobe Community Professional ,
Feb 16, 2011

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2011 0
Community Beginner ,
Feb 16, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2011 2
Community Beginner ,
Feb 16, 2011

Copy link to clipboard

Copied

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 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2011 1
Community Beginner ,
Feb 16, 2011

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2011 0
Participant ,
Feb 16, 2011

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2011 0
New Here ,
Mar 19, 2011

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2011 0
New Here ,
May 12, 2011

Copy link to clipboard

Copied

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!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2011 0
Contributor ,
May 12, 2011

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2011 0
Explorer ,
Jun 30, 2011

Copy link to clipboard

Copied

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!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 30, 2011 0
Adobe Community Professional ,
Jun 30, 2011

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 30, 2011 1
Explorer ,
Jun 30, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 30, 2011 0
Valorous Hero ,
Jun 30, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 30, 2011 0
New Here ,
Apr 05, 2016

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2016 0
Adobe Community Professional ,
Apr 05, 2016

Copy link to clipboard

Copied

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.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2016 0
New Here ,
Jun 16, 2011

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 16, 2011 1
LEGEND ,
Jun 17, 2011

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2011 1
New Here ,
Aug 06, 2011

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 06, 2011 0
Explorer ,
Aug 07, 2011

Copy link to clipboard

Copied

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.>>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2011 0
New Here ,
Nov 09, 2011

Copy link to clipboard

Copied

I'll agree with Marty here: it's just bizarre that something as common and simple as centering an image has become a complex task - one that I had to research using Google to find this thread instead of just clicking a button in Dreamweaver. If the Dreamweaver folks don't get this and standards bodies think a simple center command is unnecessary, then shame on everyone involved for making web maintenance harder.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2011 2
New Here ,
Mar 06, 2012

Copy link to clipboard

Copied

I have now spent an hour trying to find out how to use Dreamweaver properties and css panel to 'centre' an image (without writing css code by hand). Being familiar with code I take shortcuts..but tried to teach 20 newbies today how to use dreamweaver and couldn't show them a simple way of doing a very simple task. Making a paragraph text-align center and then putting an image within that paragraph is not very intuitive. Creating  css code by hand is a nightmare for beginners... I am quite sure that I have scared them off web design for life. Oh how I wish I could have used tables!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 06, 2012 0