Skip to main content
A
Anonymous
March 21, 2010
Answered

Centering an image in Dreamweaver

  • March 21, 2010
  • 8 replies
  • 169689 views

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.

This topic has been closed for replies.
Correct answer Nancy OShea

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.

8 replies

cartoongoddess
cartoongoddess
Participant
April 1, 2016

You can also easily center responsive images by adding "center-block" to the img src tag.

class="img-responsive center-block"

dimitriv78598095
dimitriv78598095
Participant
March 16, 2016

this entire post is useless, i've just upgrade to cc and its a big disappointment, cs6 was so much better and user friendly

is this what i pay monthly for? i just wanna centre a stupid logo

    J
    JamesAnsellF
    Participant
    March 23, 2016

    I agree ddimitriv78598095. I have to use CS6 to teach my students because that is what my school can afford. Then at home I have to try to figure out how to do things in CC15 & everything has changed radically.

    I understand that some of that is due to the in-process change to HTML5, but Adobe has done a poor job of conducting that change. Answers to the questions about "Where did such-and-such go?" are hard to find, and when you finally do extract them from out-of-date instructions they go into answers that are for deep coders.

    I, too, feel left behind & kinda ripped off by the way this subscription thing is going.

    Still looking for an answer to this question.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 23, 2016

    I have to use CS6 to teach my students because that is what my school can afford. Then at home I have to try to figure out how to do things in CC15 & everything has changed radically.

    If you're a Creative Cloud subscriber, you can drop back to earlier versions including legacy CS6.

    Simply log-in to your Creative Cloud desktop app.

    Go to Apps > ALL APPS > PREVIOUS VERSIONS

    Download CS6.

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    A
    Anonymous
    July 15, 2014

    TO ANSWER THE ORIGINAL QUESTION:

    Format -> Align -> Center

    its that simple

      S
      scottmps
      Participant
      October 30, 2014

      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

      M
      MoodleMuse
      Participant
      March 6, 2012

      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!

      K
      Kevin_S_
      Participant
      November 10, 2011

      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.

        A
        Anonymous
        August 7, 2011

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

        M
        MartyR707
        Known Participant
        August 7, 2011

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

        V
        vrsioffice
        Participant
        June 17, 2011

        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
          MurraySummers
          Inspiring
          June 17, 2011

          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>

            Zabeth69
            Zabeth69
            Participating Frequently
            March 21, 2010

            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

              G
              gokhan999
              Participant
              May 9, 2010

              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
                Community Expert
                Nancy OSheaCommunity Expert
                Community Expert
                May 9, 2010

                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— Product User & Community Expert
                Terms & ConditionsAccessibility statement
                Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices