PDA

View Full Version : HTML Centering images




larswik
May 22, 2012, 10:19 PM
I'm not much of an HTML programmer and do most of it real simple in Dreamweaver. When I have an image I center it with <p style="text-align:center">

This time I created a PS file and sliced it up in to smaller parts. Now in Dreamweaver I am trying to figure out where to add the code. Can some one help me identify the area and the correct code if it is different


</head>
<body bgcolor="#000000" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (New front page.psd) -->
<div id="Table_01">
<div id="index-01">
<img src="images/index_01.png" width="273" height="468" alt="">
</div>
<div id="index-02">
<img src="images/index_02.png" width="146" height="468" alt="">
</div>
<div id="index-03">
<img src="images/index_03.png" width="52" height="468" alt="">
</div>
<div id="index-04">
<img src="images/index_04.png" width="136" height="468" alt="">
</div>
<div id="index-05">
<img src="images/index_05.png" width="303" height="468" alt="">
</div>
<div id="index-06">
<img src="images/index_06.png" width="273" height="26" alt="">
</div>
<div id="index-07">
<img src="images/index_07.png" width="146" height="26" alt="">
</div>
<div id="index-08">
<img src="images/index_08.png" width="52" height="26" alt="">
</div>
<div id="index-09">
<img src="images/index_09.png" width="136" height="26" alt="">
</div>
<div id="index-10">
<img src="images/index_10.png" width="303" height="26" alt="">
</div>
<div id="index-11">
<img src="images/index_11.png" width="273" height="22" alt="">
</div>
<div id="index-12">
<img src="images/index_12.png" width="146" height="22" alt="">
</div>
<div id="index-13">
<img src="images/index_13.png" width="52" height="22" alt="">
</div>
<div id="index-14">
<img src="images/index_14.png" width="136" height="22" alt="">
</div>
<div id="index-15">
<img src="images/index_15.png" width="303" height="22" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>



mif
May 23, 2012, 04:29 AM
After <div ?

<div style="text-align: center;" id="index-01">
<div style="text-align: center;" id="index-02">

vandersmissenc
May 23, 2012, 10:55 AM
I would need to actually see this to understand what you want to center, but if you are trying to center everything then change this

<div id="Table_01">

to include auto margins

<div id="Table_01" style="margin: 0 auto;">

that will center that div between the left and right of the page and there will be no space at the top. That should accomplish what you are trying to do, but if you can give us a link to preview it we could be of more help. Right now it is nothing more than a bunch of divs referencing images.

larswik
May 23, 2012, 07:28 PM
Hey , thanks for the response and sorry for the delay in getting back. I know little about HTML but I know C and Objective C for the most part. I thought I could help my friend get her new site up and running. I created it in PhotoShop and sliced it up and exported out as HTML with Images. I made a change in the settings for CSS.

Here is the splash page for her site.

http://sparrowheatley.com/

I am going to try and use the code you provided tonight and try to get all the iamges to be centered. I have no desire to learn HTML right now since I am hard at work with objective C. I thought Dreamweaver would have made this easier.

Thanks for the help.

vandersmissenc
May 23, 2012, 11:33 PM
Thanks for posting the splash page, this will center it for you:

<div id="Table_01" style="margin: 0 auto;position:relative;">

larswik
May 24, 2012, 01:47 AM
Yep, it did. Thank you very much for the help!

-Lars