Skip navigation
Currently Being Moderated

Centering an image in Dreamweaver

Mar 21, 2010 12:48 PM

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.

 
Replies
  • Currently Being Moderated
    Mar 21, 2010 12:58 PM   in reply to scott1956

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2010 1:55 PM   in reply to Zabeth69

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2010 3:45 PM   in reply to gokhan999

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2010 4:22 PM   in reply to Nancy O.

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


     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2011 2:27 PM   in reply to gokhan999

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2011 4:46 PM   in reply to MarlonFlando

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

     

    That's just wrong.

     

    Sorry....

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2011 4:46 PM   in reply to MarlonFlando

    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/WSc78c5058ca073340d cda9110b1f693f21-7bd2a.html

     

     

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2011 7:33 PM   in reply to MurraySummers

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2011 9:50 PM   in reply to MarlonFlando

    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 :-)

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2011 11:37 PM   in reply to MarlonFlando

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2011 11:55 PM   in reply to MarlonFlando

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 19, 2011 11:02 PM   in reply to phreaddee123

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 12, 2011 5:58 PM   in reply to sparky411

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 12, 2011 6:16 PM   in reply to MarlonFlando

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2011 9:17 PM   in reply to scott1956

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2011 4:00 AM   in reply to vrsioffice

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2011 2:05 PM   in reply to gokhan999

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2011 2:12 PM   in reply to MartyR707

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2011 2:40 PM   in reply to Nancy O.

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2011 4:48 PM   in reply to MartyR707

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2011 10:07 PM   in reply to scott1956

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2011 8:15 AM   in reply to Anansii

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

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 9, 2011 7:46 PM   in reply to scott1956

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 6, 2012 12:12 AM   in reply to scott1956

    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!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points