(noob) How to center these image divs?

I have these "showImage" divs size and margins the way I want, but I cannot figure out how to get them to align in the center of "imageContainer" - I'm sure this is something simple but if someone could point me in the right direction I'd really appreciate it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#imageContainer {
width: 1000px;
height: 1500px;
margin-right: auto;
margin-left: auto;
#mainContainer {
width: 1280px;
height: 5000px;
margin-left: auto;
margin-right: auto;
#showImage {
width: 162px;
height: 159px;
margin-right: 5px;
margin-bottom: 5px;
float: left;
margin-left: auto;
</style>
</head>
<body>
<section id="mainContainer">
<section id="imageContainer">
<article id="showImage"></article>
<article id="showImage"></article>
<article id="showImage"></article>
<article id="showImage"></article>
<article id="showImage"></article>
<article id="showImage"></article>
<article id="showImage"></article>
<article id="showImage"></article>
<article id="showImage"></article>
<article id="showImage"></article>
</section>
</section>
</body>
</html>

SECTION
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
ARTICLE
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID

Similar Messages

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?

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.

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

How to align these two divs next to eachother and center page?

Hey Guys
I am wanting to align two div's together and center them on the page. Any help in doing this would be great. Whenever I set them to float right or left itt'l just go elsewhere on the page... It's the two "caption" div's.
I dunno how to insert code here but website is currently vieweable here
http://adamdowning.net/rotherhamphoenixcc/team.html

Hi desertdame,
As Peter said, make a dummy booklet.
two pieces of paper 8 half pages with each one approx 8 x 5.5 when an 8 1/2 x 11 is folded in half and made into a booklet.
I think this arrangement will work:
That is a screen shot of thumbnails. I used:
File > New From Template Chooser > Page Layout > Catering Brochure.
Then I deleted the content to leave just a text box on the left and right of each page.
Regards,
Ian.

How to center text in DIV

Newbie with a really simply question. How would one center this text smack dab in the middle of this DIV (assuming that this DIV were already centered on the page?

If you were doing it by hand in Source View, you would add text-align:center; to the css for the div.
From Design View, highlight the text and click the Align Center button in the Properties tab.
EDIT: That would be for horizontal alignment. To align the text vertically (this only works if the text is on one line) you can set the line-height of the div to the same as the height of the div in the css...
#your_div_id {
     text-align:center;
     line-height:70px;
     height:70px;
     width:400px;
     border:1px solid black;

How to center loaded image?

First time building an app for AIR, from Flash CS4, as I needed to be able to write to a local XML file... all is working except I cannot manage to center a loaded image properly. I am running it full screen and everything I try width / height wise gives me my desktop resolution - which I guess is right since it's full screen. However positioning goes from the stage's top/left corner - not the monitor's top/left corner.
This image illustrates the issue - when I query the size I get the red rectangle size... but when I position something it uses the green rect - ie the actual stage. How do I fix in AIR?

is you stage align property set to StageAlign.TOP_LEFT ?

How to center loaded images?

Hi,
this really puzzles me... How onLoadInit and onLoadComplete
listeners actually work? It is a photo slideshow, I am creating at
runtime image holder and then centering its registration point to
the center of main stage, then I am loading an image into it using
MovieClipLoader class, then I need to change the image registration
point so it is also centered on the stage. All works just
excellently on my pc but unfortunately when on webserver the
centering doesn't work! When the loading seems to be really
intensive it doesn't care about onLoadInit listener!!! I test it at
www.2sayhello.com/upgrade if anybody cares to see the effect.
Thanks for any info
Here is the code:

I just got the idea that this problem may be related to
loading more images at the same time, the problem occurs if I click
on next or previous button in quick success, it forces to start
downloading 2 or 3 images at the same time and that is exactly the
moment I see not centered images or my preloader not finisshed.
That may also means that onLoadInit or onLoadComplete were never
executed... Each click on next or previus button creates and
unloads image holder. Then it loads a new image into it by calling
this function:

Noob / how to display an image?

Hello,
I'm just trying to display an image thats on my local drive, the class is /src/main.java, and the picture is located at /src/image/flower.jpeg
The window appears, but no picture?
import java.awt.*;
import javax.swing.*;
public class Main extends JFrame
public Main()
setSize(500,500);
JPanel panel = new JPanel();
panel.setBackground(Color.CYAN);
ImageIcon icon = new ImageIcon("flower.jpg");
JLabel label = new JLabel();
label.setIcon(icon);
panel.add(label);
this.getContentPane().add(panel);
setVisible(true);
public static void main (String[] args) // no args expected
new Main();
} // end main
} // end class ImageDisplay
thanks from a noob

Some advices.
1. Avoid extending a class, except you need to change extended class behavior or need to put object of your class to some base-class container. In other ways - use association as much, as possibly.
2. Never perform any of Swing operation in other Thread, than Event-Dispatch Thread (EDT). To put code running in Event-Dispatch Thread, use the SwingUtilities.invokeLater();
3. Time-consuming tasks must be put off EDT. Use EDT as only "update UI" thread.
So, your program should looks like this:
import java.awt.*;
import javax.swing.*;
public class Main implements Runnable
    private ImageIcon icon;
    private JFrame jf;
    public Main(){
        icon = new ImageIcon("flower.jpg");
    public void run() {
        jf = new JFrame("Picture viewer");
        jf.setSize(500,500);
        JPanel panel = new JPanel();
        panel.setBackground(Color.CYAN);
        JLabel label = new JLabel();
        label.setIcon(icon);
        panel.add(label);
        jf.setContentPane(panel);
        jf.setVisible(true);
    public static void main (String[] args) {// no args expected
        Main main = new Main();
        SwingUtilities.invokeLater(main);
    } // end main
} // end class ImageDisplay

How to delete an image from bluetooth in Nokia N96...

I am using Nokia N96. I received some images from a freidn via bluetooth and i have transfered them to my PC. I need to delete the images in my Nokia phone but it seems not working. Please advice me how to delete these images? coz teh Option DELETE is not working here.
Thanks a lot!

hi El_Loco
I received the images via bluetooth. Then I connect my Nokia N96 to my PC at home. I cut and pasted the images from the mobile folder to my PC. (If I cut and paste, by right the images should have been gone from the mobile phone memory..is that correct?) However, after I disconnect my Nokia from my PC, the images are still in my Inbox folder.
The wierd thing is: The name of teh file is still there, but I cannot open them, and when I tried to delete them, there is a message: General: Already in use !
So..it looks like because I cut and pasted from my PC, there was some errors in the Nokia phone? The file names are there, but I can no longer open them and nor delete them.

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 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 to get my Image to outline correctly in an assigned DIV

The last question I posted here regarded placing DIVs within parent DIVs and getting them to outline correctly. This question is actually strinkingly similar, and hence my hesitance to post it. I feel I'm looking over something extremely obvious, but I just can't seem to pinpoint my thoughts to it. My problem has to with the 'Image' block in the picture posted below:
Click here for image
Whenever I place an image/background image into that DIV, it jumps into the center and for some reason sees that place as its starting position. Using absolute positioning and negative values for left and top I got it into position, but I figured that this was just a temporary solution to a problem currently unsolved. Like ducktaping a leaking valve, you want to find a good solution ASAP.
I have left the leftcolumn edited so an image can be given of what I want to reach. However, the center column will also include text on the right of the image (quite possibly alligning around it should the image be smaller in height than the border). I want the image to outline below the upper title (and seperate DIV) 'Corporate News'.
Another thing that seems to happen is that it completely takes out the bar which is put in as a seperate DIV, presumabely because it just knocks it down because the two don't overlay for some reason (despite the bar having a higher z-index and being absolutely positioned with 0px from the bottom).
Source coding for the center column:
<div id="centercolumn">
<div id="indextitles">
    <div id="centercolumntitle">CORPORATE NEWS</div>
</div>
<div id="centercontent"><img src="images/Index page/News/newsmain.png" width="843" height="411" /> </div>
<div id="centercbar">
    <div id="cbartext"> <a href="news.html">
      <div id="centercbartext">Old makes way for the new</div>
      </a> </div>
</div>
CSS coding for the parent DIV:
#centercolumn {
background-image: url(../images/Columns/centercolumn.png);
background-repeat: no-repeat;
height: 349px;
width: 672px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
float: left;
overflow: hidden;
CSS coding for the indextitle (Corporate News) [This CSS coding applies to all three black colored titles in the image]:
#indextitles {
position: absolute;
z-index: 2;
left: 10px;
top: 5px;
CSS coding for the bar which is meant to be resting on the lower border of the image (similar to the ones of the other columns):
#centercbar {
background-image: url(../images/Column%20bars/centercbar.png);
background-repeat: no-repeat;
height: 49px;
width: 672px;
position: absolute;
z-index: 5;
bottom: 0px;
No formatting has been applied yet to the actual image. I'm just trying to understand why it won't jump into place, despite all of my efforts.

How come you need to use so many <divs>? The less <divs> the better and easier to work with (see example below) Incidentally the image size in the code that you have supplied is way bigger in dimension than the parent <div> it's inserted into which will distort everything. Copy and paste the code below into Dreamweaver. Position the image <div> 'contentcenter' using margin NOT absolute positoning.
<!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>Untitled Document</title>
<style type="text/css">
#centercolumn {
background-image: url(../images/Columns/centercolumn.png);
background-repeat: no-repeat;
height: 349px;
width: 672px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
float: left;
background-color:#FF9;
#centercbar {
background-image: url(../images/Column%20bars/centercbar.png);
background-repeat: no-repeat;
height: 49px;
width: 672px;
position: absolute;
z-index: 5;
bottom: 0px;
background-color:#CC0;
#centercontent {
width: 430px;
height: 230px;
margin: 40px auto 0 auto; /* sets equal margin left/right */
border: solid 1px #000;
background-color: #999;
</style>
</head>
<body>
<div id="centercolumn">
<div id="centercolumntitle">CORPORATE NEWS</div>
<div id="centercontent"> </div>
<div id="centercbar">Old makes way for the new</div>
</div>
</div>
</body>
</html>

I am using an Macbook pro in conjunction with a Time Capsule. I back up all my aperture librarys on it, but how can i view these images that are stored on the capsule please ??

I am using an Macbook pro in conjunction with a Time Capsule. I back up all my aperture librarys on it, but how can i view these images that are stored on the capsule please ??

If you want to see what is in a file that is backed up by time machine then you have to restore the entire file. Having said that I have had good experience with Time Machine and individual files... if the file is there then all of it's components are almost for sure there. A way to get around this in Aperture would be to use referenced images. The images then still exist as individual files and can be backed up and restored individually. You would have to do so on a file by file basis though and your album information would still only be saved within the Aperture library.

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.

(noob) How to center these image divs?

Similar Messages

Maybe you are looking for