Center of an image

Is there a simple way of adding a horizontal and vertical guide to show the center of an image?

Grab these actions:
http://home.comcast.net/~phoz/bbs/GuidelinesActions.atn
ADDENDUM/CAUTION: I seem to remember something about the "TicTacToe" action in that set being inaccurate, so you may want to ditch it. Gotta save the new version out of Photoshop and upload it to my server space. I'll have to do that later...

Similar Messages

Zooming into the center of an image

Hi, I have this code that allows the user to zoom into an image that they have selected. However, when the image is zoomed into using the slider, it goes towards the top left corner of the image rather than the center. How can I modify my code to zoom into the center of the image instead?
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.event.*;
public class MapScale extends JPanel
     BufferedImage image;
     double scale = 1.0;
     public MapScale(BufferedImage image)
          this.image = image;
     protected void paintComponent(Graphics g)
          super.paintComponent(g);
          Graphics2D g2 = (Graphics2D)g;
          g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);
          double x = (getWidth() - scale*image.getWidth())/2;
          double y = (getHeight() - scale*image.getHeight())/2;
          AffineTransform at = AffineTransform.getTranslateInstance(x,y);
          at.scale(scale, scale);
          g2.drawRenderedImage(image, at);
     public Dimension getPreferredSize()
          int w = (int)(scale*image.getWidth());
          int h = (int)(scale*image.getHeight());
          return new Dimension(w, h);
     private JSlider getSlider()
          int min = 1, max = 36;
          final JSlider slider = new JSlider(min, max, 16);
          slider.setMajorTickSpacing(5);
          slider.setMinorTickSpacing(1);
          slider.setPaintTicks(true);
          slider.setSnapToTicks(true);
          slider.setPaintLabels(true);
          slider.addChangeListener(new ChangeListener()
               public void stateChanged(ChangeEvent e)
                    int value = slider.getValue();
                    scale = (value+4)/20.0;
                    revalidate();
                    repaint();
          return slider;
     public static void main(String[] args) throws IOException
          JFileChooser selectImage = new JFileChooser();
          if (selectImage.showOpenDialog(null) == JFileChooser.APPROVE_OPTION)
               String path = selectImage.getSelectedFile().getAbsolutePath();
               BufferedImage image = ImageIO.read(new File(path));
               MapScale test = new MapScale(image);
               JFrame f = new JFrame();
               f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
               f.getContentPane().add(new JScrollPane(test));
               f.getContentPane().add(test.getSlider(), "Last");
               f.setSize(400,400);
               f.setLocation(200,200);
               f.setVisible(true);
}

KGCeltsGev wrote:
Hi, I have this code that allows the user to zoom into an image that they have selected. However, when the image is zoomed into using the slider, it goes towards the top left corner of the image rather than the center. How can I modify my code to zoom into the center of the image instead?Since you use a JScrollPane and change the client size when you zoom in/out you need to scroll to the center every time you zoom in/out.
This is done by using scrollRectToVisible.
slider.addChangeListener(new ChangeListener() {
    public void stateChanged(ChangeEvent e) {
        int value = slider.getValue();
        scale = (value+4)/20.0;
        revalidate();
        Dimension d = getPreferredSize();
        Dimension extentSize = ((JViewport) getParent()).getExtentSize();
        scrollRectToVisible(new Rectangle((d.width-extentSize.width)/2, (d.height-extentSize.height)/2, extentSize.width, extentSize.height));
});

Can an action set the dimension of the crop and put in the center of the image?

Hi
running cs6 64bit under w7 64bit
can an action set the dimensions of the crop height & length and put the crop in the center of the image?
or should i need a script?
i mean for example i taken many photos about 20mp mega pixel
i would like to run a script or an action that set the height & length and set the crop in the center of the image
thanks

mantralightroom wrote:
i have cs6 but i haven't in the action option conditional actions
ps i tried to record a script to set the histogram channel RGB or Luminocity , but the script plugin doesn't record it and even the action can do it
you know cs6 starts with histogram in colors mode
I have a hard time with English even though it may native language. I'm having some problem with what you wrote.
Yes cs6 does not have what Adobe calls conditional actions they put into CC. That feature more or less an IF statement condition on some document attributes. Like if document width is greater then document height play action landscape else play action portrait.   With CS6 you need to write one line script to use in actions. Most of the utility scripts I wrote for use in actions are more complex then a simple if statement.
The way you record scripts is PS is be using Adobe Scriptlistener Plug-in when installed the plug-in records everything you do that can be recorded into two log files one in JavaScript and the other in VBS. The code generated works by passing parameters to Adobe Photoshop's Action Manager. To make scripts toy need to extract the steps you need from one of the log files.    However some thing you can do in Photoshop can not be recorded. And while your right that the scriptlistener plug-in does not record anything for setting the histograms to RGB channel or Luminosity channel your wrong when you write the Action Recorder can do it.
However scripts can get the histograms channel data. I have never process a histogram in a script however there is a sample Photoshop Histogram in the Photoshop javascripting guide. That creates a text graph log.
// Function to activate all the channels according to the documents mode
// Takes a document reference for input
function TurnOnDocumentHistogramChannels(inDocument) {
    // see how many channels we need to activate
    var visibleChannelCount = 0
    // based on the mode of the document
    switch (inDocument.mode) {
        case DocumentMode.BITMAP:
        case DocumentMode.GRAYSCALE:
        case DocumentMode.INDEXEDCOLOR:
            visibleChannelCount = 1
            break;
        case DocumentMode.DUOTONE:
            visibleChannelCount = 2
            break;
        case DocumentMode.RGB:
        case DocumentMode.LAB:
            visibleChannelCount = 3
            break;
        case DocumentMode.CMYK:
            visibleChannelCount = 4
            break;
        case DocumentMode.MULTICHANNEL:
        default:
            visibleChannelCount = inDocument.channels.length + 1
            break;
    // now get the channels to activate into a local array
    var aChannelArray = new Array()
    // index for the active channels array
    var aChannelIndex = 0
    for(var channelIndex = 0; channelIndex < inDocument.channels.length;channelIndex++) {
        if (channelIndex < visibleChannelCount) { aChannelArray[aChannelIndex++] = inDocument.channels[channelIndex] }
    // now activate them
    inDocument.activeChannels = aChannelArray
// Save the current preferences
var startRulerUnits = app.preferences.rulerUnits
var startTypeUnits = app.preferences.typeUnits
var startDisplayDialogs = app.displayDialogs
// Set Adobe Photoshop CC to use pixels and display no dialogs
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS
app.displayDialogs = DialogModes.NO
// if there are no documents open then try to open a sample file
if (app.documents.length == 0) { open(File(app.path + "/Samples/Fish.psd")) }
// get a reference to the working document
var docRef = app.activeDocument
// create the output file
// first figure out which kind of line feeds we need
if ($.os.search(/windows/i) != -1) {fileLineFeed = "Windows" }
else { fileLineFeed = "Macintosh"}
// create the output file accordingly
fileOut = new File("~/Desktop/Histogram.log")
fileOut.lineFeed = fileLineFeed
fileOut.open("w", "TEXT", "????")
// write out a header
fileOut.write("Histogram report for " + docRef.name)
// find out how many pixels I have
var totalCount = docRef.width.value * docRef.height.value
// more info to the out file
fileOut.write(" with a total pixel count of " + totalCount + "\n")
// channel indexer
var channelIndex = 0
// remember which channels are currently active
var myActiveChannels = app.activeDocument.activeChannels
// document histogram only works in these modes
if (docRef.mode == DocumentMode.RGB ||docRef.mode == DocumentMode.INDEXEDCOLOR ||docRef.mode == DocumentMode.CMYK) {
    // activate the main channels so we can get the documents histogram
    TurnOnDocumentHistogramChannels(docRef)
    // Output the documents histogram
    OutputHistogram(docRef.histogram, "Luminosity", fileOut)
// local reference to work from
var myChannels = docRef.channels
// loop through each channel and output the histogram
for (var channelIndex = 0; channelIndex < myChannels.length; channelIndex++) {
    // the channel has to be visible to get a histogram
    myChannels[channelIndex].visible= true
    // turn off all the other channels
    for (var secondaryIndex = 0; secondaryIndex < myChannels.length;secondaryIndex++) {
        if (channelIndex != secondaryIndex) { myChannels[secondaryIndex].visible= false }
    // Use the function to dump the histogram
    OutputHistogram(myChannels[channelIndex].histogram,myChannels[channelIndex].name, fileOut)
// close down the output file
fileOut.close()
alert("Histogram file saved to: " + fileOut.fsName)
// reset the active channels
docRef.activeChannels = myActiveChannels
// Reset the application preferences
app.preferences.rulerUnits = startRulerUnits
app.preferences.typeUnits = startTypeUnits
app.displayDialogs = startDisplayDialogs
// Utility function that takes a histogram and name
// and dumps to the output file
function OutputHistogram(inHistogram, inHistogramName, inOutFile) {
    // find ouch which count has the largest number
    // I scale everything to this number for the output
    var largestCount = 0
    // a simple indexer I can reuse
    var histogramIndex = 0
    // see how many samples we have total
    var histogramCount = 0
    // search through all and find the largest single item
    for (histogramIndex = 0; histogramIndex < inHistogram.length;histogramIndex++) {
        histogramCount += inHistogram[histogramIndex]
        if (inHistogram[histogramIndex] > largestCount)
        largestCount = inHistogram[histogramIndex]
    // These should match
    if (histogramCount != totalCount) {
        alert("Something bad is happening!")
    // see how much each "X" is going to count as
    var pixelsPerX = largestCount / 100
    // output this data to the file
    inOutFile.write("One X = " + pixelsPerX + " pixels.\n")
    // output the name of this histogram
    inOutFile.write(inHistogramName + "\n")
    // loop through all the items and output in the following format
    // 001
    // 002
    for (histogramIndex = 0; histogramIndex < inHistogram.length;histogramIndex++) {
    // I need an extra "0" for this line item to keep everything in line
    if (histogramIndex < 10)
        inOutFile.write("0")
    // I need an extra "0" for this line item to keep everything in line
    if (histogramIndex < 100)
        inOutFile.write("0")
    // output the index to file
    inOutFile.write(histogramIndex)
    // some spacing to make it look nice
    inOutFile.write(" ")
    // figure out how many X’s I need
    var outputX = inHistogram[histogramIndex] / largestCount * 100
    // output the X’s
    for (var a = 0; a < outputX; a++)
        inOutFile.write("X")
    inOutFile.write("\n")
inOutFile.write("\n")

Is there a way in PP CS4 to remove the center of the image?

Is there a way in PP CS4 to remove the center of the image?
I've tried using crop and linear wipe effects but both of these effects take way from the outside of the image moving in. I'm trying to find a way to take away from inside of the image and move out. Basically making a window, if you will, to view the video layer underneath.
Thanks for your help!

Crop wasn't such a bad idea.
Drop to be revealed clip in V1.
Drop clip for the curtain effect in V2 and add crop.
Set first keyframe at say 1 second for LEFT 50%, second keyframe at say 2 seconds to 100%
Add the clip for the curtain effect again but on V3 (superimposded).
Add crop.
Now animate RIGHT: 1 second 50% at 2 seconds 100%.
Done

How do you center a background image?

I've been trying to center my background image but am unable
to do it. I've resorted to trying to center the image instead
because I couldn't figure how to stretch a background image to be
viewable on a browser without a repeating image. Can someone
explain how to center a background image and/or stretch a
background image?

body { background-position:center; }
Maybe?
Background images don't stretch.
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
==================
"ff542" <[email protected]> wrote in message
news:g14orc$18l$[email protected]..
> I've been trying to center my background image but am
unable to do it.
> I've
> resorted to trying to center the image instead because I
couldn't figure
> how to
> stretch a background image to be viewable on a browser
without a repeating
> image. Can someone explain how to center a background
image and/or stretch
> a
> background image?
>
> body{
> background-image:
url(final-fantasy-1-the-journey-beginsbackground.jpg);
> background-repeat; no-repeat;
> background-color: #99CCFF;
> }
>

Notification Center off center on screen (Image included)

When I do the pull down main Notification Center, it pulls down off center on the screen and I can't do anything with it, I have to hit the home button and restart whatever app I was using, is anyone else having this problem?
I have an image of it:

Yeah that works for me to, but only as a temp fix..... A few days later it happens again, but it's good to know I'm not the only one

Center Spry Basic Image Slideshow on the webpage in Dreamweaver Cs6   ?

Hi, I'm working on a Website for a client in Dreamweaver CS6: northstarconservancy.org. How do I center the Spry Basic Image Slideshow on the pages? I've tried a few options and nothing has been effective, anyone? Thanks, Amanda

It would be easier to give you exact instructions if we could see your page. Do you have a link you could share?
In general, place a div on your page and give it the basic css for centering...
#divid {
     width:800px; (you can change the 800 to whatever width your slideshow uses)
     margin:auto;
Then place your slideshow within that div in your html...
<div id="divid"> all your spry slideshow info </div>
As long as you haven't used APDivs, or position:absolute on your site, which you should never do unless absolutely necessary (pun kindof intended), the div that the slideshow resides in will be centered within it's container.

Need to Center Align an Image

I have a report that is printing out a series of barcode sheets. I need for the barcode image to be centered on the page each time it prints, but the problem is that the item will vary in size from page to page, depending upon the actual value behind the barcode. So, I can't just manually center the field in the paper layout, and if I set the field to 'variable' or 'expand' so the field can enlarge if it needs to, it simply extends out in the right direction, but not the left, and is off-center.
Is there any way to make sure the field will stay centered based on the value of the field, and no the field itself?
Thanks,

Insert the image into a frame with variable horizontal elasticity, and then anchor the center of the frame top edge to some object centrally positioned on the page. If you don't have such, just draw a piece of line or something in the header of the page.

Page won't center on background image

I am having some trouble centering my page on a background image. Here is my CSS for my body. I thought the left and right margins set to auto should center the page. The site can be found at http://www.findlaypopcorn.com the CSS is in index.css ( attached)
body { background-color: #ffffff; margin-left:auto; margin-right:auto; width:796px; padding:0px; background-image: url(images/kernelsunpopped.JPG); background-repeat: no-repeat; background-attachment: fixed; } Please help

It is centered for me in Chrome, Firefox and IE 7 on Vista.
What browser/OS do you not see it centered for?

How to center text within image

If you go to http://www.terwax.com/bf2.html , youll see text in the left side. It took me enough time to center the image. Now that i created ap tag within div, i was able to put text but in every browser its different. Below is the code. Please help me find easy way that can center the text within image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Terwax - Battlefield</title>
<style type="text/css">
body {
     background-color: #333;
     height:inherit;
     width:inherit;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
#apDiv1 {
     position:absolute;
     width:753px;
     height:110px;
     z-index:1;
     left: 286px;
     top: 174px;
     overflow: visible;
     text-justify: auto;
</style>
</head>
<body>
<div>
    <img src="images/import.png" alt="back" width="1288" height="992" align="middle" />
    <div id="apDiv1">Thanks for coming to the site. I am currently working on it. This isn't finished yet and a lot of graphics to come! Keep checking back and if you don't like or like something, make sure to hit me an email at [email protected] .</div>
</div>
<p> </p>
</body>
</html>

Terwax.com wrote:
That code didn't fix the problem
It just moved the text right to the bottom of page. Last time i did this, the text was static. It couldn't be highlighted.
I know there are tutorials, but i just need help with this as i can finish the website. I am doing all the tutorials currently (lynda.com), but its a long way from now and will be happy if someone can help me get the text in the grey box rather than falling out of it.
Try the code below in IE9. It should work if the browser is backwards compliant. I'll be amzed if it doesn't. Unfortunately I don't have IE9 available to test in. Didn't even know it was available. Is it a beta version of the browser which maybe hasn't been fully tested yet?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Terwax - Battlefield</title>
<style type="text/css">
body {
    background-color: #333;
#imageWrapper {
position: relative;
width: 1288px;
margin: 0 auto;
#apDiv1 {
    position:absolute;
    width:753px;
    left: 270px;
    top: 174px;
</style>
</head>
<body>
<div id="imageWrapper">
    <img src="images/import.png" alt="back" width="1288" height="992" align="middle" />
    <div id="apDiv1">Thanks for coming to the site. I am currently working on it. This isn't finished yet and a lot of graphics to come! Keep checking back and if you don't like or like something, make sure to hit me an email at [email protected] .</div>
</div>
</body>
</html>

How do I center my background image and get a round border radius?


body {
background-color: rgba(30,30,30,1);
background-image: url('images/me_atsunsetbackground1.JPG');
background-repeat: no-repeat;
background-position: center;
background-border-radius: 100%;
position: fixed;
margin-top: 250px;

That doesn't surprise me, that code wasn't meant to be a direct replacement for yours, it's just there to illustrate an idea for Nancy.
The <body> tag itself should not be changed in that manner because the <body> holds ALL of your site's visual elements. If you were to change the <body> in the way you are attempting (which isn't possible), everything in your site would need to be within that oval.
If you just want an oval background image on the <body>, turn the image itself into an oval in Photoshop and outside the oval, either use the same color as the <body> background-color, or leave it transparent and save it as a .png with transparency.
Your inset shadow css is badly malformed...
1. The attribute "shadow" doesn't exist. You're looking for CSS3 box-shadow.
2. Safari and DW need the -webkit- prefix to display it (again, you need to test in more than one browser)
3. The settings need to be in the correct order: h-shadow, v-shadow, blur, spread, inset (something like box-shadow:10px 10px 5px 5px rgba(255, 255, 255, .5) inset;
Keep in mind, css3 settings (like rgba color settings and box-shadow in its entirety) don't work in IE8 and lower at all, and are pretty spotty in IE9.

Batch "Place" gets off center after multiple images

This is sort of a hard one to explain. I'm trying to place a border and watermark over multiple images through the Place command. The image that I'm using to place is a .psd file with transparent background. The main images are tiff files. The problem is, that after a number of images that are changed, the placed image (border/watermark) gets off center by a few pixels each time and I end up with a border shifting to the right. How can I fix this? Here is my process:
1. Create action
2. Resize image to 1200x1800px 300dpi.
3. "Place" border/watermark image over top of main image. Center Position is 600px and 1200px. Scale 100.1% for each side
4. Flatten Image
5. Sharpen
6. Close action
7. I then select multiple images via Bridge and go to "Batch" or "Image Processor" and run it.
8. Over multiple images, the placed image "creeps" to the right by a pixel or two each image.
Is there something I'm doing wrong here? The placed image is the exact same size and orientation as the original images.

Ahh this is a huge help. This problem has been a thorn in my side for months. Thank you for the quick answer. Here is the list of my steps now...
1. Resize background image to whatever I need
2. Place overlay image (border/watermark) and "enter"
3. Select All
4. Layer > Align layers to selection > Vertical Centers
5. Layer > Align layers to selection > Horizontal Centers
6. Flatten Image
Works great, as long as the placed image is the same size as the background image.

Center and Vertical Center Align an image

how can I center and vertical align an image so that it stays center and vertically aligned in the middle and on all devices???
Simply put I would like the image smack in the middle of every screen it is viewed on.

Try this
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('yourimage.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
</style>
</head>
<body>
</body>
</html>

Adding a slideshow using apDivs - Will not center / clashes with images.

Hey guys,
I'll be as quick and to the point as possible. I'm new to Dreamweaver and am having some problems in my attempts to create a simple portfolio website.
I'm trying to add in a basic image slide-show while making use of apDivs. I've had a look online and found some fantastic JQuery slide-shows, and I ended up adapting this one for use on my website;
http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery
I have images as the base of my website and I wanted to add the slide-show on top of them (and the same goes for a couple of embeded YouTube videos too.) I added in an apDiv and placed the code for the slide-show inside it. This created a layer that goes on top of the image, and I am able to put the code for the slide-show inside it with no problems (providing the position of the apDiv is set to absolute.)
#apDiv1 {
    position:absolute;
    top:419px;
    left:400px;
    width:555px;
    height:480px;
    z-index:1;
The problem I'm having is aligning the cursed thing. Obviously, setting the apDiv's positioning to absolute is a bad idea, as while it looked fine in one resolution, it doesn't in another. I've tried changing the position of the apDiv to relative, and then adding in some changes to my code;
#apDiv1 {
    position:relative;
    width:555px;
    height:480px;
    margin-left: auto;
     margin-right:auto;
    z-index:1;
This centers my slideshow (which is wonderful), however it is no longer layered on-top of the image (since this seems to only work when the position is set to absolute.) Instead, the slideshow appears underneath the image rather than on top.
Is there any possible way I can keep the apDiv (which contains the slide-show) centered whilst remaining on-top of the image? Like I say, it'll layer on top of it fine when set to absolute, but wont center. When set to relative, it'll center but not layer on top. It's one or the other and I'm pulling my hair out over it at the moment.
If anyone can give any help at all, please please let me know. I've included a notepad document including the whole of my code for the page (including my goofy comments) at the address below if it helps in any way;
http://www.box.net/shared/5nufqc78jbg0mfkb00n5

Of course mate. Like I mentioned before, I still don't have any of my web-pages online (since I've been trying to get it all fixed and working first.) I'm hoping to host with 1-2-3 Reg, so I'm waiting for pay day before I buy a years worth from them.
The folder at the link below though contains the HTML document for the page along with all its images and CSS scripts;
http://www.box.net/shared/lgqltz3i90ya8k3nyui9
Despite them being in the folder, if you'd rather, I'll paste the main bodies HTML code below (and also the accoumpanying CSS document. If there's any problems, please let me know. Thanks again!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Info || Lee Sparkes BSc Games Design Graduate</title>
<link href="styles/website_main.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>

<script>
$(document).ready(function() {
    //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
    //set the default item to the correct position
    $('#slides ul').css({'left' : left_value});
    //if user clicked on prev button
    $('#prev').click(function() {
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;
        //slide the item
        $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){
            //move the last item and put it as first item
            $('#slides li:first').before($('#slides li:last'));
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
        //cancel the link behavior
        return false;
    //if user clicked on next button
    $('#next').click(function() {
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
        //slide the item
        $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function () {
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
        //cancel the link behavior
        return false;
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(
        function() {
            clearInterval(run);
        function() {
            run = setInterval('rotate()', speed);
//a simple function to click next link
//a timer will call this function, and the rotation will begin.
function rotate() {
    $('#next').click();
</script>

<link href="styles/website_menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #003d6a;
#carousel {
    width:555px;
    height:480px;
    margin:0 auto;
#slides {
    overflow:hidden;
    position:relative;
    width:550px;
    height:440px;
    border:1px solid #ccc;
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0;
    width:2200px;
#slides li {
    width:550px;
    height:440px;
    float:left;
#slides li img {
    padding:0px;
#buttons {
    padding:0 0 5px 0;
    float:right;
#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
a#prev {
    background:url(arrow.gif) 0 -31px no-repeat;
a#prev:hover {
    background:url(arrow.gif) 0 0 no-repeat;
a#next {
    background:url(arrow.gif) -32px -31px no-repeat;
a#next:hover {
    background:url(arrow.gif) -32px 0 no-repeat;
.clear {clear:both}
#apDiv1 {
    position:relative;
    width:555px;
    height:480px;
    margin-left: auto;
    margin-right:auto;
    z-index:100;
</style>
</head>

<body>
<div id="container">
<div id="banner"><img src="images/banner.gif" width="1163" height="109" alt="Lee Sparkes || BSc Games Design Graduate" />
    <ul id="website_menu" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a>      </li>
      <li><a href="info.html">Info</a></li>
      <li><a href="portfolio.html">Portfolio</a>      </li>
      <li><a href="downloads.html">Downloads</a></li>
    </ul>
</div>

<img src="images/info01.jpg" alt="" width="1163" height="270" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="778,18,877,115" href="http://uk.linkedin.com/in/leesparkes" alt="Linkedin Profile" />
<area shape="rect" coords="903,15,998,113" href="http://checkeredknight.tumblr.com/" alt="Tumblr Profile" />
<area shape="rect" coords="1022,16,1121,113" href="http://www.youtube.com/lightning89" alt="YouTube Profile" />
</map>
<img src="images/info02.jpg" alt="" width="1163" height="522" border="0"/>

<div id="apDiv1"><div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="slides">
        <ul>
            <li><img src="infoslide1.jpg" width="550" height="440" alt="Slide 1"/></li>
            <li><img src="infoslide2.jpg" width="550" height="440" alt="Slide 2"/></li>
            <li><img src="infoslide3.jpg" width="550" height="440" alt="Slide 3"/></li>
            <li><img src="infoslide4.jpg" width="550" height="440" alt="Slide 4"/></li>
        </ul>
        <div class="clear"></div>
    </div>
</div></div>

<img src="images/info03.jpg" alt="" width="1163" height="416" /><img src="images/info04.jpg" alt="" width="1163" height="380" border="0" usemap="#Map4" />
<map name="Map4" id="Map4">
<area shape="rect" coords="374,122,561,149" href="mailto:[email protected]" alt="" />
<area shape="rect" coords="374,152,572,181" href="mailto:[email protected]" alt="" />
</map>
<img src="images/info05.jpg" alt="" width="1163" height="282" /><img src="images/info06.jpg" alt="" width="1163" height="418" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="736,202,940,228" href="http://www.iplay.com/" alt="iplay Website" />
</map>
<img src="images/info07.jpg" alt="" width="1163" height="362" border="0" usemap="#Map3" />
<map name="Map3" id="Map3">
<area shape="rect" coords="234,12,548,45" href="http://dyingfordaylight.com/" alt="Dying for Daylight Website" />
<area shape="rect" coords="733,272,941,304" href="http://www.iplay.com/" alt="iplay Website" />
</map>
<img src="images/info08.jpg" alt="" width="1163" height="234" /><img src="images/info09.jpg" alt="" width="1163" height="56" /></div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("website_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
#container {
    width: 1163px;
    background: #001524;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}#banner {
    position: relative;
#website_menu {
    position: absolute;
    top: 65px;
    right: 0px;
#main_image {
    background-color: #001524;

How do I get images to automatically center in a picture box?

How do I get images to automatically center in a picture box (e.g. place a picture box on a master page and set it so that any image placed inside will automatically center, but not scale)? This was a simple procedure in CS5 (set "Fitting Options" to 'center' by clicking on the center box in the 9-box centering tool) but seems to have disappeared in CS6/CC. Am I missing something?

Hi and thanks. Actually, my problem is with setting the properties of the image frame to 'align center' before an image is placed, allowing me to place large numbers of images and having them automatically center instead of me centering each one manually. Even when I create an object style the frame will not hold any alignment settings and apply them to the image being placed (unless some manner of scaling has been chosen, which is not something I want). There are work-arounds I have used but it would be nice to be able to just put a picture box on a master page, set it to align it's contents to the center and just be done with it . Thanks though.

Center of an image

Similar Messages

Maybe you are looking for