• 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

165.8K

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
Valorous Hero ,
Mar 21, 2010 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

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 ,
May 09, 2010 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.

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 ,
May 09, 2010 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— Product User, Community Expert & Moderator

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 ,
May 09, 2010 May 09, 2010

Copy link to clipboard

Copied

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


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
Feb 16, 2011 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

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
LEGEND ,
Feb 16, 2011 Feb 16, 2011

Copy link to clipboard

Copied

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

That's just wrong.

Sorry....

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
Feb 16, 2011 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

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
Feb 16, 2011 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 🙂

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 ,
Feb 16, 2011 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— Product User, Community Expert & Moderator

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
Feb 16, 2011 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.

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
Participant ,
Feb 16, 2011 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.

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
Mar 19, 2011 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.

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 ,
May 12, 2011 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!!

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
May 12, 2011 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.

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 ,
Apr 05, 2016 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.

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 ,
Apr 05, 2016 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— Product User, Community Expert & Moderator

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 ,
Jun 30, 2011 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!!

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 ,
Jun 30, 2011 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— Product User, Community Expert & Moderator

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 ,
Jun 30, 2011 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....

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
Valorous Hero ,
Jun 30, 2011 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

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 ,
Jun 16, 2011 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>

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
LEGEND ,
Jun 17, 2011 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>

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
Aug 06, 2011 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...

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 ,
Aug 07, 2011 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.>>

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