• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Centering an image in Dreamweaver

Guest
Mar 21, 2010 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.

TOPICS
How to

Views

164.2K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 16, 2016 Mar 16, 2016

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.

Votes

Translate

Translate
New Here ,
Nov 09, 2011 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.

Votes

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
community guidelines
New Here ,
Mar 06, 2012 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!

Votes

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
community guidelines
Guest
Jul 15, 2014 Jul 15, 2014

Copy link to clipboard

Copied

TO ANSWER THE ORIGINAL QUESTION:

Format -> Align -> Center

its that simple

Votes

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
community guidelines
New Here ,
Oct 29, 2014 Oct 29, 2014

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Beginner ,
Mar 16, 2016 Mar 16, 2016

Copy link to clipboard

Copied

are you talking about the cs6 version or the cc version? because in the cc i can't find the align and centre

Votes

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
community guidelines
Community Beginner ,
Mar 16, 2016 Mar 16, 2016

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Mar 16, 2016 Mar 16, 2016

Copy link to clipboard

Copied

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Mar 22, 2016 Mar 22, 2016

Copy link to clipboard

Copied

I agree d. 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.

Votes

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
community guidelines
Community Expert ,
Mar 23, 2016 Mar 23, 2016

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Jan 20, 2020 Jan 20, 2020

Copy link to clipboard

Copied

LATEST

Not any more (2020).  The only versions available are the Creative CRAP (CC) versions.   CS6 is my preferred version.  I despise the CC versions.  Adobe has decided to adopt the Microsoft business model.  Let's update our software to where it is worse than the previous version and way harder to use.  Let's remove features that made it easier for non-professional designers/developers (like me) to use.   It's getting to where it's easier to hand code.  The only saving grace for Adobe is, they have have good support.  Nancy O'Shea, and others are a Godsend.  She has helped me out a few times.

Votes

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
community guidelines
Community Beginner ,
Apr 01, 2016 Apr 01, 2016

Copy link to clipboard

Copied

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

class="img-responsive center-block"

Votes

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
community guidelines