26 Replies Latest reply: Oct 29, 2014 5:45 PM by scottmps RSS

    Centering an image in Dreamweaver

    scott1956 Community Member

      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.

        • 1. Re: Centering an image in Dreamweaver
          Zabeth69 Community Member

          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

          • 2. Re: Centering an image in Dreamweaver
            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.

            • 3. Re: Centering an image in Dreamweaver
              Nancy O. MVP

              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

              • 4. Re: Centering an image in Dreamweaver
                gokhan999 Community Member

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


                • 5. Re: Centering an image in Dreamweaver
                  MarlonFlando

                  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

                  • 6. Re: Centering an image in Dreamweaver
                    MurraySummers ACP/MVPs

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

                     

                    That's just wrong.

                     

                    Sorry....

                    • 7. Re: Centering an image in Dreamweaver
                      Nancy O. MVP

                      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-7bd 2a.html

                       

                       

                       

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

                      • 8. Re: Centering an image in Dreamweaver
                        MarlonFlando Community Member

                        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

                        • 9. Re: Centering an image in Dreamweaver
                          PushThrough Community Member

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

                          • 10. Re: Centering an image in Dreamweaver
                            MarlonFlando Community Member

                            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.

                            • 11. Re: Centering an image in Dreamweaver
                              phreaddee123 Community Member

                              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.

                              • 12. Re: Centering an image in Dreamweaver
                                sparky411

                                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.

                                • 13. Re: Centering an image in Dreamweaver
                                  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!!

                                  • 14. Re: Centering an image in Dreamweaver
                                    teedoffnewbie Community Member

                                    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.

                                    • 15. Re: Centering an image in Dreamweaver
                                      vrsioffice Community Member

                                      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>

                                      • 16. Re: Centering an image in Dreamweaver
                                        MurraySummers ACP/MVPs

                                        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>

                                        • 17. Re: Centering an image in Dreamweaver
                                          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!!

                                          • 18. Re: Centering an image in Dreamweaver
                                            Nancy O. MVP

                                            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

                                            • 19. Re: Centering an image in Dreamweaver
                                              MartyR707

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

                                              • 20. Re: Centering an image in Dreamweaver
                                                Zabeth69 Community Member

                                                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

                                                • 21. Re: Centering an image in Dreamweaver
                                                  Anansii

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

                                                  • 22. Re: Centering an image in Dreamweaver
                                                    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.>>

                                                    • 23. Re: Centering an image in Dreamweaver
                                                      Kevin S.

                                                      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.

                                                      • 24. Re: Centering an image in Dreamweaver
                                                        MoodleMuse

                                                        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!

                                                        • 25. Re: Centering an image in Dreamweaver
                                                          413xm4933

                                                          TO ANSWER THE ORIGINAL QUESTION:

                                                           

                                                          Format -> Align -> Center

                                                           

                                                          its that simple

                                                          • 26. Re: Centering an image in Dreamweaver
                                                            scottmps

                                                            I needed this answer today and read through the comments on this post.  Your's is proof that coming in last is sometimes the best way.  Thanks.  I hit my forehead with my fist and had several V-8 moments.

                                                             

                                                            I already said THANKS but it sure bears repeating in this case:  THANKS