Img centering

HTML & CSS
1

I am designing my own website and I am having trouble centering an image. So far, I’ve tried <center></center> in the html and it wouldnt work, I am thinking I may need to do something in my CSS. Any help is appreciated! :slight_smile: The image that I want center is highlighted in bold.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Welcome</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<body>


<script> 
//Script shows current date

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>")
</script>

 
<div id="body_wrapper">
<div id="container">

	<!-- Start of Page Header -->

	<div id="page_header">
	<h1><span>Shop</span></h1>
	</div>
	
	<!-- End of Page Header -->


	<!-- Start of Navigational Menu -->

	<div id="nav_menu">

		<ul>
		<li id="menu1"><a href="main.htm"><span>Mainpage</span></a></li>
		<li id="menu2"><a href="about.htm"><span>About Me</span></a></li>
		<li id="menu3"><a href="portfolio.htm"><span>Samples</span></a></li>
		<li id="menu4"><a href="kidsnsports.htm"><span>Shop</span></a></li>
		<li id="menu5"><a href="africa.htm"><span>Prices</span></a></li>
		<li id="menu6"><a href="contact.htm"><span>Contact</span></a></li>
		</ul>

		<div class="clearthis">&nbsp;</div>
	</div>

	<!-- End of Mavigational Menu -->

	<div class="clearthis">&nbsp;</div>


	<!-- Start of Welcome to my Site -->

<div id="welcome">

		<div class="content_header">
		<h2><span>Welcome to my Site</span></h2>
		</div><br /><br />

		<div class="content">
        <div class="thumbnail_dborder_1">
		<div class="thumbnail_dborder_2">
		<div class="thumbnail_dborder_3">
		<div class="thumbnail_dborder_4">
       [B]<img class="displayed" src="images/welcome_thumbnail.jpg" width="400" height="200" alt="Thumbnail Caption" />[/B]
</div>
</div>
</div>
</div>


<center><h1><b><marquee behavior="alternate">Welcome</marquee></h1></b></center><br/><br/><br/>


 <p><b>Title</b></p><p>Text</p><br /><br />


<p><b>Title</b></p><p> Text</p>


</div>

		<div class="clearthis">&nbsp;</div>
	</div>

	<!-- End of Welcome to my Site -->

	<!-- Start of My Portfolio -->

	<div id="portfolio">

		<div class="content_header">
		<h1><span>My Portfolio</span></h1>
		</div>


		<!-- Start of Gallery -->

		<div id="gallery">

			<ul>
			<li><a href="C:\\Documents and Settings\\Owner\\My Documents\\Visual Studio 2008\\WebSites\\Em\\images\	est.jpg"><img src="images/test.jpg" width="84" height="76" alt="Thumbnail 1 Caption" /></a></li>
			<li><a href="C:\\Documents and Settings\\Owner\\My Documents\\Visual Studio 2008\\WebSites\\Em\\images\	est.jpg"><img src="images/test2.jpg" width="93" height="76" alt="Thumbnail 2 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" /></a></li>
			</ul>

		</div>

		<!-- End of Gallery -->


		<div class="clearthis">&nbsp;</div>

	</div>

	<!-- End of Client List -->


</div>
</div>


<!-- Start of Page Footer -->

<div id="page_footer">
Web design by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a><br/><br/><br/>


<embed name="musicplaylist"
src="musicplaylist.m3u"
width="300"
height="26"
loop="true"
hidden="false"
autostart="true"
>



<br /><br /><center>Em © 2011</center>

</div>

<!-- End of Page Footer -->

</body>
</html>

My CSS

* {
	margin: 0px;
	padding: 0px;
}

body {
	padding: 80px 0px 0px;
	background: url('images/background_top.gif') #c4b8a1 repeat-x;
	color: #695d47;
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	text-align: center;
}

a {
	color: #695d47;
	background-color: inherit;
	text-decoration: underline;
}

a:hover {
	color: #ab9c7e;
	background-color: inherit;
}
span {
	display: none;
}

img {
 
  border:none;

  } 
ul {
	list-style-type: none;
}

li {
	list-style-type: none;
}

p {
	margin: 0px 0px 15px;
	text-align: justify;
	line-height: 15px;
}

.clearthis {
	margin : 0px;
	height : 1px;
	clear : both;
	float : none;
	font-size : 1px;
	line-height : 0px;
	overflow : hidden;
	visibility: hidden;
}


#body_wrapper {
	padding: 5px 0px 10px;
	width: 100%;
	background-color: #fff;
	color: inherit;
}

#container {
	margin: 0px auto;
	width: 758px;
	text-align: right;
}

#container .content_header {
	margin: 20px 0px 0px auto;
	width: 730px;
	height: 40px;
	background: url('images/content_header_bg.gif') repeat-x 0% 0%;
}

#container .content {
	margin: 3px 150px 0px 28px;
	width: 580px;
	text-align: left;
}


/* Page Header */

#page_header {
	background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
	color: #6a604e;
	float: left;
}

#page_header h1 {
	width: 280px;
	height: 125px;
	overflow: hidden;
	background: url('images/website_title.gif') no-repeat 50% 50%;
}


/* Navigational Menu */

#nav_menu {
	margin-left: 9px;
	padding-left: 19px;
	float: right;
	background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
	color: #b3a386;
	text-align: center;
	font-family: tahoma, arial, sans-serif;
}

#nav_menu a {
	color: #b3a386;
	background: inherit;
}

#mav_menu a:hover {
	color: #857860;
	background: inherit;
}

#nav_menu ul {
	width: 450px;
	height: 125px;
	overflow: hidden;
}

#nav_menu li {
	float: left;
	border-width: 0px 1px 1px 0px;
	border-color: #c1b7a5;
	border-style: solid;
	font-size: 20px;
}

#nav_menu li#menu3, #nav_menu li#menu6 {
	border-right: none;
}

#nav_menu li a {
	display: block;
	width: 149px;
	height: 62px;
	text-decoration: none;
}

#nav_menu li a:hover {
	color: #857860;
	background-color: #f4eee2
}

#nav_menu li a span {
	padding-top: 17px;
	display: block;
}


/* Welcome to my Site */

#welcome .content_header h2 {
	height: 28px;
	background: url('images/welcome_header.gif') no-repeat 0% 0%;
	
}

#welcome p {
	width: 420px;
	float: right;
	text-align:center;
}


/* Client List */

#clientlist .content {
	margin-top: 18px;
	margin-right: 260px;
	width: 470px;

}

#clientlist .content_header h1 {
	height: 28px;
	background: url('images/clientlist_header.gif') no-repeat 0% 0%;
}

#clientlist p {
	width: 300px;
	float: right;
}

#photographer_image {
	width: 758px;
	text-align: left;
	overflow: hidden;
}

#photographer_image span {
	display: block;
	margin-top: -269px;
	margin-left: 517px;
	width: 241px;
	height: 300px;
	background: url('images/main_image.gif') no-repeat 0% 0%;
	z-index: 1;
	position: absolute;
}


/* My Portfolio */


#portfolio .content_header h1 {
	height: 28px;
	background: url('images/portfolio_header.gif') no-repeat;
}

#portfolio {
	padding-bottom: 12px;

	background: url('images/gallery_title.gif') no-repeat 29px 80px;
}

#gallery {
	padding: 40px 0px 25px 59px;
}

#gallery ul {
	width: 700px;
}

#gallery li {
	margin-right: 30px;
	margin-bottom: 25px;
	padding: 4px 4px 2px;
	background-color: #c4b8a1;
	color: inherit;
	float: left;
}


/* Page Footer */

#page_footer {
	padding: 9px 10px 6px;
	font-weight: bold;
	float: none;
	clear: both;
}

#page_footer a:hover {
	background-color: inherit;
	color: #4f4635;
}



/* Thumbnail with Double-Border */

.thumbnail_dborder_1 {
	margin: 0px 12px 5px 0px;
	background: url('images/thumbnail_border_1.gif') #695d47 no-repeat 0% 0%;
	color: inherit;
	clear: left;
	float: left;
}

.thumbnail_dborder_2 {
	background: url('images/thumbnail_border_1.gif') no-repeat 100% 0%;
}

.thumbnail_dborder_3 {
	background: url('images/thumbnail_border_1.gif') no-repeat 100% 100%;
}

.thumbnail_dborder_4 {
	padding: 4px 4px 3px;
	background: url('images/thumbnail_border_1.gif') no-repeat 0% 100%;
}

.thumbnail_dborder_1 img {
	border: #fff 7px solid;
}


/* Thumbnail with Single-Border */

.thumbnail_border_1 {
	margin: 5px 12px 5px 0px;
	background: url('images/thumbnail_border_2a.gif') #c5b9a2 no-repeat 0% 0%;
	color: inherit;
	clear: left;
	float: left;
}

.thumbnail_border_2 {
	background: url('images/thumbnail_border_2b.gif') no-repeat 100% 0%;
}

.thumbnail_border_3 {
	background: url('images/thumbnail_border_2c.gif') no-repeat 100% 100%;
}

.thumbnail_border_4 {
	padding: 4px 4px 3px;
	background: url('images/thumbnail_border_2d.gif') no-repeat 0% 100%;
}
2

Welcome to Sitepoint, Hoku!

The center tag is deprecated. dont use it.

also, you should wrap that image in a block level element… :confused:

but if what you are trying to do is center the image horizontally, you have a few choices

  1. give it display:block; margin: 0 auto;
  2. wrap it in a block level element, and give that element text-align:center
  3. give #welcome text-align:center and then give all its direct children text-align:left.

I would opt for #2 because: 1) you really shouldn’t have an inline element hanging about block elements like that anyway and 2) it will be far cleaner than setting text align center, and then resetting it for all other children of #welcome.

hope that helps you out.

3

Thanks for the welcome! :slight_smile: So, I could put the image in a div, give it an id, and then adjust the CSS in order for the image to become center. Correct?

4

That’s right.you could give it a class, then you could reuse the rule somewhere else.

.cc{text-align:center}

    &lt;div class="content"&gt;
    &lt;div class="thumbnail_dborder_1"&gt;
   &lt;div class="cc"&gt;&lt;img class="displayed" src="images/welcome_thumbnail.jpg" width="400" height="200" alt="Thumbnail Caption" /&gt;&lt;/div&gt;

</div>

as long as am at it… you also dont need the <BR>s and might be better off adding margin-top: to #welcome .content{}

THE CENTER tag IS DEPRECATED. and you dont need the <B> tags around the H1 ( the were closed wrong anyway, and I am not sure any current browser uses the marquee tag anymore…

<h1 class=“cc”><marquee behavior=“alternate”>Welcome</marquee></h1>

5

Thanks for looking over my code, I will make the other changes once I get everything up and running. I tried putting the image in the div like you suggested, and still after refreshing, my image didnt center itself.

6

add this to your CSS:
.cc { text-align:center;}

and replace this in your ORIGINAL markup:
<img class=“displayed” src=“images/welcome_thumbnail.jpg” width=“400” height=“200” alt=“Thumbnail Caption” />

with this
<div class=“cc”><img class=“displayed” src=“images/welcome_thumbnail.jpg” width=“400” height=“200” alt=“Thumbnail Caption” /></div>

that should do it.

7

The containing divs need to have a width set so there’s something to center in. At the moment, because .thumbnail_dborder_1 is floated, it will shrink-wrap its contents (or that is, only be as wide as its contents). Set the width for it that you want, and then the image will have something to center itself in.

8

You can put all the borders, padding etc on the outer div, so no need for inner ones. As for the other things needed, you’ll see when you make the above changes. The text area will need to be made full width, for example.

9

Do I need to do that just for .thumbnail_dborder_1 or all of them?

10

Photo template - Free Website Templates This is the original layout, the photo with couple is what I am trying to get centered so that the text is underneath it.

11

All those inner divs have no purpose and should be removed. You can center the image by removing the float (in red) and adding the text-align: center (blue). There will be some other page tweaks needed, though.

.thumbnail_dborder_1 {
  background: url("http://www.sitepoint.com/forums/images/thumbnail_border_1.gif") no-repeat scroll 0 0 #695D47;
  clear: left;
  color: inherit;
 [COLOR="Red"] float: left;[/COLOR] /* remove */
  margin: 0 12px 5px 0;
  [COLOR="Blue"]text-align: center;[/COLOR]
}
12

The inner divs are the borders. What are the other page tweaks that are need?

13

Is there away I could center the picture on the left hand side and have the text to the right? Similar to the example site I posted? In my version, I just edited the picture width and height.

14

I’m not sure what you are trying to do. “Center on the left?” Do you want your page to appear as it does in the page you linked to? I thought you wanted to change that.

15

Yes, similar to the page. I do want to change it, but I just out of curiosity I just want to see how it would look like with my image resized.

16

Do you have a copy live? I have the feeling about a third of your HTML should be pitched in the trash, but I’d have to see it live with the images to say for sure… but I’ve got the nasty suspicion you’ve been bitten by the “div around EVERYTHING” bug.

As it is, with clearing DIV, comment placement likely to trip rendering bugs (yes, I said COMMENTS!), multiple H1’s and nonsensical heading structure, use of the EMBED tag and CENTER tags (neither of which has a place in modern markup), static scripting inlined in the markup, document.write, and host of other outdated coding techniques… well…

There’s a lot we can teach you here about doing things better.

17

No, I do not have a live copy. I’ve just been using IE to see any changes I’ve made. Yes, I do realize I need to get rid of some code, I was hoping to get it up and working the way I wanted to before I made the changes needed.