Argh! Centering an image!?!

I just don't get it! DW practically makes web pages sing, dance and tell jokes, but won't let me center an image easily.   I had hoped to 'go live' with my website today, but I've spent 3 hours trying to figure out how to center one stupid image on one stupid page (and yes, I'm one stupid person). Grrrr!
I have one page out of 18 (main container set to justify left) that has a table explaining soil types and I want to add a picture of the corresponding soil map.    When I add the table I get an option in the Properties box to center the table and it looks great. I don't understand why there is no such option for the image?
I checked all my DW books and it doesn't address this. I searched here and found two threads, this one http://forums.adobe.com/message/2675825#2675825 and one other from 2009 but I must be doing something wrong because it's not working. I looked in my CSS handbook and found something about floating conatiners (float: right), but it seems like there should be more to the syntax plus I don't know if there's a tag called (float: center). Anyway . . .
My main questions is: why can I center a table with one click but not an image, and secondly, how do I get the image to center?   I can't seem to get my keyboard to take a screenshot and the site is not live til I fix this image issue. Thanks for your help and for listening to my rant.

lostinny wrote:
why was I able to center the table with one click from the Properties box, but not the image?
Although both the HTML <table> and <img> tags have the (now deprecated) align attribute, the available values are different. The <table> tag accepts align="center". The <img> tag doesn't, because it's considered by HTML to be an inline element. You need to use CSS to convert it to a block-level element in order to centre it.
As you will hear frequently in this forum, you need to learn HTML and CSS in order to understand how to work successfully with Dreamweaver and web design.

Similar Messages

Centering background image [was: I have inserted an image background...]

Here is the code. body{ background-image:url(backgrounds/MOMANDDAD.JPEG);}. what do i need to do to correct this mistake?
I have made an inline stylesheet on a html and put a background image in it and it will not center in ie8, but is okay in firefox 3.09. what is going on?
thanks mike

In the future, try to keep your subject brief: "Centering background image" would suffice.
Without seeing your site, image and other code, it's hard to guess what you have done so far. Posting a URL to the live page is the best way to get a reply.
Try this in your CSS:
body {
background: url (your_image.jpg) top center no-repeat;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
Tutorials - http://w3schools.com/

Firefox upon opening an image in a new tab, centers the image from top and bottom and surrounds the image with a grey frame. Just started having the problem today, searched Google to no avail.

Firefox upon opening an image in a new tab, centers the image from top and bottom and surrounds the image with a grey frame. Just started having the problem today, searched Google to no avail.

Oh wow, looks like a new feature.
The "page" links in a stylesheet with the address "resource://gre/res/TopLevelImageDocument.css". If you remove that reference, then the image displays in the old style.
'''''Edit: Please skip the rest of this post and check out the next one.'''''
There might be a more elegant solution than that, but you could use a bookmarklet to strip out that link when you want to view the page in its old style. A bookmarklet is a snippet of JavaScript you save on the Bookmarks toolbar for quick access.
First, copy the following code to the clipboard (it's all one long line):
<br>javascript:var ssheet=document.querySelector('link[href="resource://gre/res/TopLevelImageDocument.css"]'); if(ssheet)ssheet.parentNode.removeChild(ssheet); void 0;
Next, if you are not displaying the Bookmarks Toolbar, use View > Toolbars > Bookmarks Toolbar to display it. (If you aren't using the classic Menu bar, press Alt+v to call up the old View menu. Right-clicking the gray area just below the page address also allows you to display the Bookmarks Toolbar.)
Right-click on the Bookmarks Toolbar (or Mac equivalent of right-click!) and choose New Bookmark.
Paste the code into the Location box (the second box).
Then type a useful name in the Name box (e.g., Oldstyle Picture) and click Add.
Now, when you want to tweak the image display, click the button to run the script.
Manual clicking is a hassle, so it might make sense to look into other solutions. (Greasemonkey didn't seem to work; I think it might not run on .jpg files.)

Pasting from a script centers the image

Hello,
I'm new to these formus and to extendScript in particular, and I would be verry happy if someone could point out what I'm doing wrong.
I have a script that opens a image (lets call it icon), and for all the images in a folder, resizes icon to the current folder image, pastes the image on top, and saves it.
It works great except for a small problem which I can't seem to fix. When the image from the folder is smaller than the canvas ej:
Then when the image gets copied over the icon image, it's pasted centered, like this:
Which defeats the purpose of what I wanted to do, I needed it pasted in the same position as it was in the original image. As we are talking of well over 1k images, doing this by hand is a bit problematic, so I would be really thankful if someone could help me out.
Here is the script:
#target photoshop
app.bringToFront();
function main()
    var iconFile = File.openDialog ("Select the base (icon0) file", "*.png", false);
    var inputFolder= Folder.selectDialog ("Please select folder to process");
    if(inputFolder == null) return;
    var fileList = inputFolder.getFiles("*.png");
    var outFolder = Folder(inputFolder +"/Processed");
    if(!outFolder.exists) outFolder.create();
    // Open icon file and create a new layer, making the background one invisible
    var icon = open(iconFile);
    var artLayerRef = icon.artLayers.add()
    icon.layers[1].visible = false;
    for(var z in fileList)
        // Open icon file
        var icon = open(iconFile);
        var artLayerRef = icon.artLayers.add()
        icon.layers[1].visible = false;
        // Open 32 bit file
        var img32 = open(fileList[z]);
        var img32Name = decodeURI(fileList[z].name.replace(/\.[^\.]+$/, ''));
        // select all document
        img32.selection.selectAll();
        img32.selection.copy();
        // Copy image to the icon layer
        activeDocument = icon;
        icon.resizeImage (img32.width.value, img32.height.value);
        icon.paste();
        // Save icon with name
       var saveFile= File(outFolder + "/" + img32Name + ".png");
        Save24 (icon, saveFile);
        // Clear layer, close open image
        icon.selection.selectAll();
        icon.selection.clear();
        img32.close();
    icon.close(SaveOptions.DONOTSAVECHANGES);
main();
function Save24(doc, saveFile)
     pngSaveOptions = new PNGSaveOptions();
     doc.saveAs(saveFile, pngSaveOptions, true, Extension.LOWERCASE);

Hy Michael,
first, thank you for taking time to reply. I apologize for how confusing the post is, I realize how hard it is to understand by code, so I'll try it with images to make it clearer.
Here is the original icon file:
// Open icon file
        var icon = open(iconFile);
        var artLayerRef = icon.artLayers.add()
        icon.layers[1].visible = false;
And now we open the first img32 file (sorry for the size, it's a bit hard to see but there is a small green hill on bottom left)
// Open 32 bit file
        var img32 = open(fileList[z]);
        var img32Name = decodeURI(fileList[z].name.replace(/\.[^\.]+$/, ''));
Then we select the img32 and copy it:
// select all document
        img32.selection.selectAll();
        img32.selection.copy();
And then we resize the icon document to fit the img32 size:
// Copy image to the icon layer
        activeDocument = icon;
        icon.resizeImage (img32.width.value, img32.height.value);
Finaly we paste on the icon the img32 content we had copied:
icon.paste();
Notice how the img32 contents get copied smack in the center? I needed to copy it in it's original position, not the center.
You can probably see the problem with working with translate, as I can't figure out the displacement the image needs. All images I need to work are different sizes and positioned in random positions in the canvas, so I can't hack it to be always bottom right or something like that, I need it in the original position.
Any tips? Your help is greatly appreciated, and frankly, the only hope I have about this whole busines right now.
Thanks again.

Centering an image inside its container

Hi,
I have been placing several images with text on a web page on which I have been using CSS3 to float the images either left or right so that my text wraps around the image.
Now, at the bottom of this same page, I want to add a wider image that I do not want to wrap text around. I just want the image to centered on my page (or in its container I guess I should say, which is a div).
If anyone could tell me the best way to do this, I would greatly appreciate it.
Thanks in advance,
Paul

Thank you Ken,
I created the .clearing rule as you suggested and added the <hr class="clearing" /> after the end of the paragraph that wraps around my second (and final) floated image.
After the <hr class="clearing" />, I have my image reference for the image I want to be centered inside its containing DIV as follows....
<hr class="clearing" />
<p><img src="Images/pk_38_41_43.jpg" alt="Membrane Casting Line" width="612" height="367" class="center"/></p>
...the class="center" is a class I created where I set the left and right margins to "auto", hoping that this would do the job. This didn't work. My image appears all the way to the left. If you can give me a hint what I should do to get it centered, I'd really appreciate it.
Thanks again for your help,
Paul

Centering an image when printing

I print cards frequently. I use the custom package option in lightroom 4 and place my main image and logo, using the red line on the grid as a guide to center the main image. It usually appears centered, but when I print, it's off just a touch - enough to look wrong. When I go back in to center it, the software clicks the image into place just a bit off - won't allow me to center it exactly. The only fix I've found is to use a border (inner stroke), which is then chopped off a little on one side, which isn't as obvious. I haven't seen anyone else ask this question, so must be missing something very obvious??? Thanks.

I print cards frequently. I use the custom package option in lightroom 4 and place my main image and logo, using the red line on the grid as a guide to center the main image. It usually appears centered, but when I print, it's off just a touch - enough to look wrong. When I go back in to center it, the software clicks the image into place just a bit off - won't allow me to center it exactly. The only fix I've found is to use a border (inner stroke), which is then chopped off a little on one side, which isn't as obvious. I haven't seen anyone else ask this question, so must be missing something very obvious??? Thanks.

Centering an image on an HP Designjet Z3200?

I have just been through a totally worthless set of conversations with HP. I am specifying "Center Image" in the PSC5 print dialog window when I send the image to the printer. The printer is 1/4" in short on left and top margins.
HP claims that since Acrobat centers perfectly it must me an Adobe problem. However, my Epson 7900 centers perfectly.
Anyone out there have this experience?

I did that; makes no difference. Still gives me no border on top, and 3 differenrt size borders on the other 3 sides. Makes no difference if I click "center" or not.
It looks perfect on the computer screen when I "center" it, but it doesn't print the way the screen show.
It also makes no difference if I click "crop to fit" or not.
I'm using PSE 9, on Lion MAC, with Epson 1280 printer.
It seems like the most basic thing that a PSE program should do is to center a print. In the past I've used this same printer with Photoshop, and no problem.

Centering an image

Hi, (a novice here)
I am trying to center an image in the background of a web page. This item would be outside the container in CSS. The image uploaded always stays to the left. Can some write the code correct for me. Also, where would the code be placed. Out the body tags or inside.This is the code that I used.
<div img src="images/Header 01-22-12.jpg" width="1350" height="308" align="middle"></div>
Thanking you in advance for your help and support.
Gary

I am trying to center an image in the background of a web page.
CSS Code:
body {
     background-image: url (some-image.jpg);
     background-repeat: no-repeat;
     background-position: center top;
     width: 1000px; /**adjust page width as needed**/
     margin:0 auto; /**with width, this is centered on screen**/
See CSS Background Property:
http://www.w3schools.com/css/css_background.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Centering an image in Dreamweaver

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.

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

Centering an image in a frame

Anyone know how to center an image in a frame -centered vertically and horizontally- such that the tags are recognized by at least Internet Explorer and Firefox?

You can best position things with CSS but since you are describing frames, you may be suited to making a table cell with center vertical alignment and center horizontal alignment.

I need help centering my images.

Hi,
I am very new to DreamWeaver and have been teaching myself
for the past week. I am building my own small website for my
portoflio and can not figure out how to auto center my website.
When I center one image the other images are in the wrong spots. I
want everything to center itself based on how big the browser is
open. Please someone help me!!!!! It's very hard to explain what I
am trying to do.. I have 3 layers in my page and they are
overlapping. I dont want each of them auto centered by
themselves,,, I want them all centered as a whole. Do I have to
select them all then center them somehow? I have tried everything
and now I am forced to ask for help!!
here is a screenshot
http://img.photobucket.com/albums/v179/smagicpie/Picture1.png

It would work exactly the way you want if you did what I
suggested. As far
as I can tell, there is no change to the code at the link you
give below.
Using layers to build your pages is what has gotten you into
this mess.
It's not a best practice by any means....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"smagicpie" <[email protected]> wrote in
message
news:fo5dl0$j94$[email protected]..
> This isn't working. It is centering the links like you
would center text.
> I
> just need all these layers to center as a whole in the
page. I dont want
> anything else to change. Is there anyway to select all
layers and center
> them?
> Here is a screenshot showing the layers. The links are
in a table within a
> layer.
http://img.photobucket.com/albums/v179/smagicpie/Picture1.png
> www.alisonleahwalker.com
>

Centering background images problems

Let's say I apply a background image to the body and center top the image like this
=========================================================
<body style="background:url(BG_05.jpg); background-position:top center; ">
</body>
=========================================================
the background aligns itself in the center when the page load, and even if i resize the browser window the background image will center automatically...but is it possible to let the background stay in the same position even if i resize the browser's window?
Many thanks...

Sure. Instead of applying the BG to your body, apply it to a #wrapper div along with an expressed width in px, and margin-left & margin-right of auto.
CSS:
#wrapper {
width: 990px; /**adjust width to suit**/
margin:0 auto; /**with width, this is centered on screen**/
background: url(your_bg_image.jpg) top center;
HTML:
<body>
<div id="wrapper">
your centered page content goes here...
</div>
</body>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Centering Background Image

After countless hours of using the forums I finally am
posting my first question.
Is there a way to center the background image that is set
through page properties? I have a centered table and it would be
nice to have a continuous background.
Any help would be appreciated.

Or you could do what Murray just said :-) But through
standard html, no.
Lawrence Cramer
*Adobe Community Expert* - Dreamweaver -
http://tinyurl.com/jhnyq
email: lawrence at cartweaver dot com
Cartweaver CF, ASP & PHP Shopping Cart for Dreamweaver
www.cartweaver.com
news://support.cartweaver.com
=====================================================
"Lawrence *Adobe Community Expert*"
<[email protected]> wrote in
message news:emuj2u$636$[email protected]..
> Nope, you can't center a page background image. You have
to work from the
> top left hand corner.
>
> Now you could create a fixed width, floating, centered
"master container"
> div and have a background image for this div. Then place
all your
> content in this container. This would give you the
illusion of a centered
> page background.
>
> Hope this helps.
> --
> Lawrence Cramer
> *Adobe Community Expert* - Dreamweaver -
http://tinyurl.com/jhnyq
> email: lawrence at cartweaver dot com
>
> Cartweaver CF, ASP & PHP Shopping Cart for
Dreamweaver
> www.cartweaver.com
> news://support.cartweaver.com
> =====================================================
>
>
> "cheesewagon" <[email protected]> wrote
in message
> news:emuhmn$4hv$[email protected]..
>> After countless hours of using the forums I finally
am posting my first
>> question.
>>
>> Is there a way to center the background image that
is set through page
>> properties? I have a centered table and it would be
nice to have a
>> continuous
>> background.
>>
>> Any help would be appreciated.
>>
>>
>
>

Creating a centering background image

I would like to have a background like this page. http://www.atlantafalcons.com/MediaLounge/VideoLanding.aspx?q=Falcons+First+Take
As you can see it centers itself. I checked out the code and did not see anything about centering. Here it is.
</head>
<body class="multiMedia" style="background-image:url(/~/media/5C0943272C2443F4801646B2B490AF41.ashx); background-color: #b88035;">
<div id="wrapper">
Any ideas?
SH

JCellini wrote:
They used a text-align: center declaration in the body rule
body {
    margin: 0;
    padding: 0;
    text-align:center;
    font:11px Arial, Verdana, sans-serif;
    color:#000;
    background:#bd0d18 url(/media/backgrounds/bg_page.jpg) no-repeat center top;
Actually that is calling a different image and it's this line that centers that particular background:
background:#bd0d18 url(/media/backgrounds/bg_page.jpg) no-repeat center top;
However, not even sure where it's used... this is the direct link to that image:
http://www.atlantafalcons.com//media/backgrounds/bg_page.jpg
This is the actual bg image used on the page:
http://www.atlantafalcons.com/~/media/5C0943272C2443F4801646B2B490AF41.ashx
and in the code:
<body class="multiMedia" style="background-image:url(/~/media/5C0943272C2443F4801646B2B490AF41.ashx); background-color: #b88035;">
They haven't used any positioning on that image however. Starts at top 0 left 0.

Stop centered background image from getting cut off by a shrinking window

My problem can be seen at cortw.public.iastate.edu
my background image is centered to the top of the screen. When the browser window shrinks, I want the background image to stop moving when it reaches the edge of the screen. Currently, the image continues to move past the edge of the window. I want to create an affect similar to apple.com and Facebook.com
I have little experience coding. Any help would be greatly appreciated!

Your CSS is seriously flawed. Replace what you have now with this CSS code and it will work better:
body {
padding:0;
width: 980px;
margin:0 auto; /**centered on screen**/
color: #333;
background: #FFF url(background.jpg) no-repeat;
/**menu**/
#apDiv2 {
margin:55px 0 0 350px;
For best results, don't use positioning. You don't need it. Use CSS margins, padding and floats to align elements on screen.
Example: (View source in browser to see the code)
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
Nancy O.

Argh! Centering an image!?!

Similar Messages

Maybe you are looking for