Center an image

I am new to Dreamweaver. I just bought CS6 and I'm trying to center an image in a div on the left side of my page. My page is set up with multiple background layers and a left navigation column and then the right side is the main context of the page. Instead of using something like a horizontal line in my navigation area, I have a small border type design that I want centered in this column. I understand how I can place the image to the right or left but how do you center it?
I tried creating a class called .center but there's no options for centering something except for text. I did try using align center for text but that didn't work.
I'm basically a novice with all of this so any help would be greatly appreciated.

Do something like this:
1) CSS like this:
img.center { display: block; margin-left: auto; margin-right: auto; }
2) HTML like this:
<img src="my_big_one.jpg" alt="big_one" class="center" />
This should do the job.

Similar Messages

How can I dynamically center an image in Crystal Reports?

Hi! I'm using Visual Studio 2010, SQL Server 2008 R2 and Crystal Reports 13_0_11.
I have a database full of images type image in SQL Server. Every image has diferent width.
I create a report with Crystal Reports and a Dataset and does everything that I want. But I can't horinzotal align the image, in the property window, the horizontal align option is disable, I don't know why... and I don't know what to do...
Please help me with how can I center the images or how can I enable the option...

Hi Fafa0239,
Since it is related to the Crystal Reports, please post questions related to third-party products in their forums (http://scn.sap.com/thread/3440443).
Best Regards,
Jack
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

How do I center the image created in my pdf files?

When I create a pdf file from a windows application and the image has a border around it. Then open the file to view it, the border appears to be shoved to the lower left corner of the opened pdf file image so instead of having a 1/4" border around the page, the border is 0 on the left side and bottom, and 1/2" on the right side and top. It prints this way also. How can I make Acrobat 8 Standard center my image so the border is the same all the way around? The border is all the way around in the application the document is created in, and when printed from the application it is correct all the way around, but the pdf file is not.

Terry
In your windows application, if you can click "center horizontally" and "center vertically" do that. I'm not sure what windows application you're using, but this happens to me when I use Microsoft Office programs.

Images in the full screen lightbox are not centered horizontally on the screen. Is there a way to center the images?

I have tried it in different screen sizes but teh result is all same. Horizontally images are slightly on the right. How can I center the images?

Hi,
Thanks for your answer. It is ok when using the lightbox without full screen option. When I use the fullscreen option, the container of the image is centered but the image in the container is not. I do center everything but when it comes to full scren there is nothing like centering.
Here is what happens when I view in the browser:

How do I center an image inside a div tag using fluid grid layout?

where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

This is what my css codes looks like where the image is in the div tag:
#logo_links {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.2033%;
    display: block;
This is the html code where the image is:
</div>
    <div id="logo_links">
      <div align="center">
        <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
      </div>
    </div>
I'm going to need more detail where to insert the suggested code as I am a newby!
Thanks

How do I center an image inside a CSS div tag using dreamweaver?

I know this may seem like a very silly queston to ask because it should seem so simple but how do I do that? I am having trouble being able to center an image inside of a div tag. Here is the code I have come up with so far. Thanks in advance for your help.
</style>
</head>
<body>
<div id="PageContainer">
<div id="PageHeader"> img.centered{display:block; margin-left:auto; margin-right:auto; }<img src="Untitled-5.jpg" alt="rowland" class="centered" /></div>
<div id="PageMenu">Content for id "PageHeader" Goes Here</div>
<div id="PageBody">Content for id "PageHeader" Goes Here</div>
<div id="PageFooter">Content for id "PageHeader" Goes Here</div>
</body>
</html>
Also you can ignore the other div tags after the first div id. The first div id that has my image link is the one I am trying to get to center my image. The image is in there just not centering.

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.

HOW TO: Action to resize & center crop images of various sizes

Hello,
I've gotten a lot of help here over the years so I wanted to share an action I created. I needed to resize and automatically center crop images of various sizes for my company's website. For example: All images needed to be 900px x 460px 72dpi - and because input images were from many different sources, the dimensions were different for each image. It seemed straight forward at first (sort of) but I couldn't find a way of doing this without a script or some third party program - so I came up with the following action. Hope someone gets some use out of it.
Note: Change action as needed to suit your needs.
Resize and Center Crop (Auto)
Fit Image
     height: 900px
     width: 900px
     With Don't Enlarge
Canvas Size
     height: 460px
     vertical: center
     extension color: white
Image Size
     width: 900px
     resolution: 72 per inch
     with scale styles
     with constrain proportions
Save (optional)
     As: JPEG
     Quality: 12
     Scans: 5 (for web images)
This assumes that the images are at least horizontal, but if you have photoshop CC you can create a conditional action that will work with vertical and horizontal images. If you are square cropping, this action makes it a breeze. I also have an action that uses the same basic logic, but lets me manually move the crop box. The only real issue I have encountered is when the original image ratio is very narrow, which leads to some white space on the top and bottom (I'm working on updating the action to address this). But it has worked on about 95% of my images. Again, you will probably need to adjust all of the variables depending on what you are trying to do, but it should be possible with the same steps. And of course this can also be used to batch process.
Feel free to let me know if anyone comes up with improvements! Thanks

Hmm thanks Mylenium, I got that response a lot when I was searching before. But if you re-read above, I am explaining a method of doing it without a script. So it wasn't really a question, just a tip in case anyone else wanted to do the same.

Center the image when click the movieclip

Need a big help guys...
i am new with flash, and i had swf which contains big image it will resize to best fit.
when i double click the image the clicked position come to center of the stage.
i achived little bit, it zooming but image not come to center position.
i have attached the fla file in it please give me a solution for it
and i have used this script to zoom on double click and bolded 2 lines are to position the image.
imagePanel.onRelease = function()
    if(lastclick - (lastclick=getTimer()) + 500 > 0){
        var sf = Math.abs(imagePanel.loadTemp._xscale);
        if (sf < 100) {
        //trace("zoomIn");
     var xss = imagePanel.loadTemp._xscale > 0 ? (1) : (-1);
    var yss = imagePanel.loadTemp._yscale > 0 ? (1) : (-1);
    var sf = Math.abs(imagePanel.loadTemp._xscale);
    sf = 100;
    imagePanel.loadTemp._xscale = sf * xss;
    imagePanel.loadTemp._yscale = sf * yss;
    imagePanel.refreshPane();
imagePanel.loadTemp._x = - (_xmouse) -35;
    imagePanel.loadTemp._y = - (_ymouse) - 150;
    else {
    //trace("zoomOut");
    var xss = imagePanel.loadTemp._xscale > 0 ? (1) : (-1);
    var yss = imagePanel.loadTemp._yscale > 0 ? (1) : (-1);
    var sf = Math.abs(imagePanel.loadTemp._xscale);
    sf = best_fit;
    imagePanel.loadTemp._xscale = sf * xss;
    imagePanel.loadTemp._yscale = sf * yss;
    imagePanel.refreshPane();

Hi friend, just change with following code in the zoom in portion
//////////////Zoom In/////////////////////////////////////
                //trace("zoomIn");
   var perX = (_xmouse - 10)/imagePanel.loadTemp._width * 100;
    var perY = (_ymouse - 43)/imagePanel.loadTemp._height * 100;
    var xss = imagePanel.loadTemp._xscale > 0 ? (1) : (-1);
    var yss = imagePanel.loadTemp._yscale > 0 ? (1) : (-1);
    var sf = Math.abs(content._xscale);
    sf = 100;
    content._xscale = sf * xss;
    content._yscale = sf * yss;
       imagePanel.refreshPane();
///////////////Zoom In ends////////////////////////////////////
/////////Position to center the image /////////////////////////
/////////This is part i needed, when i click the image it cannot move center postion, please solve my problem///////////
    /*if(_xmouse<Stage.width/2 && _ymouse<Stage.height){
        imagePanel.loadTemp._x = - (_xmouse) -35;
           imagePanel.loadTemp._y = - (_ymouse) - 150;
var newX = imagePanel.loadTemp._width * (perX/100);
    var newY = imagePanel.loadTemp._height * (perY/100);
imagePanel.loadTemp._x = imagePanel.loadTemp._x - newX;
    imagePanel.loadTemp._y = imagePanel.loadTemp._y - newY;
    //imagePanel.loadTemp._x = - (_xmouse) -35;
    //imagePanel.loadTemp._y = - (_ymouse) - 150;
The code that i had newly included is marked with red color.
Please reply...

Center Align images?

I had just finished my first page which I saved. I then checked the page on line and saw where I needed to put in a "named anchor". When I tried to do that all of the images after that point moved to the left. They were previously centered. The one image above the "named anchor" entry point stayed centered. In some of the subsequent divs where there was only text it stayed centered. I cannot imagine any reason the "named anchor" activity would effect the image centering but I am stuck. I checked the image divs and the CSS says: text-align: center; but they are all aligned left except for the image above where I tried to place the "named anchor". For instance the first of the following two images (LayoutDiv1) is perfectly centered and the 2nd image (Pic1) is on the left side of it's div as are all of the rest even though the CSS descriptions all say "centered". #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding-bottom: 15px; text-align: center; padding-top: 20px; } #pic1 { clear: both; float: left; margin-left: 0px; width: 100%; display: block; text-align: center; border-image-width: 1px; }

Since you have your page online please post a link to it.
Partial scraps of CSS code no HTML don't help much.

How to center an Image exported as EPS?

Hello,
Does anyone know how a good way to center an image on the page when exporting as EPS via a javascript from AI CS3?
Here's the workflow:
Open native AI File with multiple layers
Make only the layer being exported visible
Export the layer as EPS using export parameters
Repeat until all layers are exported
As it stands now, each image is exported as it was placed on the original AI file. I would like to center the image on the page before exporting.
Best,
Don

Hi Sneedbreedley, welcome back to the forums.
To center elements, you need just 3 things:
valid document type (DW does this for you when you create a new page).
declared width in pixels, ems or %.
margin-left and margin-right of auto (browser default).
To center paragraphs, headings, etc... use text-align:center property.
CSS:
body {
width: 980px;
margin:0 auto; /**this is centered on screen**/
.center {text-align:center}
HTML
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="center">This heading is centered</h1>
<h2>This heading is not centered</h2>
<p class="center">Insert image here</p>
</body>
</html
Nancy O.

How to center an image in the specified limits in labview 7.1

I am using labview 7.1..i want to center the image in the limits i like without using IMAQ software.please help me out
Solved!
Go to Solution.

I have the following attachment..i wan that image to be centered in the front panel..
Attachments:
background image.vi ‏30 KB

Set box to 100% width and Center an image in that box.

I can't seem to do this. I want to set a blank box to 100% width, place an image inside that box, center that image, and have the image continue to center itself when the page is resized. What am I missing?

Hey Brad,
I've done what you have done and I do not see the problem ... what's the width of your webpage set to? ... and the size of your Image? ...
The only time is won't stay in the middle is when you resize the browser and you hit the maximum set width (say for example 960px) of your webpage (set in the 'site properties page') then the image stops being in the middle, visually, but it's still in the middle you just can't see it because of the resizing and your webpage won't auto resize anymore because of that limit that's set ... try resetting you 'site properties' webpage width down to say 500px wide and see if that looks ok, until you get to the width of that setting ... but the image should still in the middle ...
Is that what you are on about? ...
cheers,
Gem

How to Center an Image?

It used to be easy to center an image, but not anymore. I do not know ANYTHING about CSS so please tell me from Step 1 how to do it.
I created a simple blank html page and inserted an image in it. I looked in properties but nothing saying CSS shows up. So at this point, how do I center it?

Hi Sneedbreedley, welcome back to the forums.
To center elements, you need just 3 things:
valid document type (DW does this for you when you create a new page).
declared width in pixels, ems or %.
margin-left and margin-right of auto (browser default).
To center paragraphs, headings, etc... use text-align:center property.
CSS:
body {
width: 980px;
margin:0 auto; /**this is centered on screen**/
.center {text-align:center}
HTML
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="center">This heading is centered</h1>
<h2>This heading is not centered</h2>
<p class="center">Insert image here</p>
</body>
</html
Nancy O.

Why is code to get center of image not working?

Hey there. I have am trying to establish the center of the imags that load so that I can put them in the center of the stage. I am doing this as each image is a different size.
Here is the code i have gotten to work before but its not working now and I have been searching to find what I have done wrong with no luck. : (
Would you look it over and maybe you will see what I am doing wrong?
public function placePicture(e:Event = null):void {
     rawImage = imageData.image[imgNum].imageURL;
     lastImageIndex = imageData.*.length() - 1;
     imageLoader = new Loader;
     imageHolder = new Sprite;
     imageLoader.load(new URLRequest(rawImage));
     imageLoader.x -= imageLoader.width/2; //this should set the image to the center no?
     imageLoader.y -= imageLoader.height/2;
     imageHolder.x = 640; //this is the center of the stage
     imageHolder.y = 100;
     imageHolder.addChild(imageLoader);
     masterHolder.addChild(imageHolder);
The result when I publish is the picture comes on stage but the top left corner goes to 640 instead of the center of the image going to 640.
I tried several variations of this all with the same result:
imageLoader.x = -1*imageLoader.width/2;
I tried using setRegistrationPoint with the following tutorial: http://flashscript.ca/set-registration-as3.php
and I tried doing all of the above by inserting the loader into a sprite and then applying the code to the sprite and then adding that sprite to another sprite and putting that at 640 and not inserting it in another sprite and trying to straight up put the existing sprite at 640 (hopefully that all makes sense). And I have tried to put it to width/3 and nothing different happens.
If you have any other ideas or can see what I am doing wrong I would really be gratefull for some tips! : )
Thanks for any help!
oh, and I am getting no errors on this.

the image's width and height are not available until loading is complete. ie, use a complete listener/listener function.

Can't Center SWF image in Browser

I've designed a website in flash and have inserted the SWF file into Dreamweaver, I can edit everything else I need, but for some reason - no matter what I do or try, I can't center this SWF image in Dreamweaver so the SWF file will rests in the center of a browser.
I've tried editing the CSS in the Body, but it doesn't change anything, no matter what. The site always sits flush left.
See results of current set up: http://www.louise-gd.com.
Please advise as soon as possible.

The whole page is in Flash? Do you know what you give up when you do that (hint: lots!)?
Try changing this -
body {
     background-color: #999;
     right: 0px;
     margin: 0px;
     padding: 0px;
     background-position: center;
     position: relative;
     visibility: inherit;
     height: auto;
     width: auto;
to this -
body {
     background-color: #999;
     margin: 0 auto;
     padding: 0;
        width:650px;
and see what happens.

Center an image

Similar Messages

Maybe you are looking for