How to center text layer in Dreamweaver

**Carson** · 09-02-2010

I am very much new to the html and also with the dreamweaver i need to center a layer of text which i have made in the dreamweaver. I have searched a lot but could not get any solutions to the problem. please help in me in this matter in order to get a proper solution and if possible try to explain with the help of an example.

**absolute55** · 09-02-2010

I don't think that it is possible to understand a problem associated with html without actually having the code and it is also not possible to implement on such problems without the code so i request you to post the code in your further replies. Because after seeing your code i can understand the whole situation quiet well.

**Carson** · 09-02-2010

I have not posted the code because of some personal issue But as you mentioned that you are not able to under stand the situation without the code i am posting the same below:

HTML Code:

<?xml version="1.0" encoding="iso-8859-1"?><!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>
<title>Techz </title>
 
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
 
<!--
body
 
 
{ 
 margin: auto auto; 
 padding: 0; 
 padding-top: 10px;
 text-align: center; 
 
} 
#centered
{ 
 width: 800px; 
 text-align: auto;  border: 0px; 
 padding: 0;  
 margin: auto auto; 
} 
 
 
 
 
#Layer1 {
	position:absolute;
	left:239px;
	width:120px;
	height:392px;
	z-index:1;
	left: 209px;
	top: 227px;
	margin: auto auto;
text-align: center;
}
.style2 {
	font-family: Times new roman, Monotype corsiva, sans-serif;
	font-weight: bold;
}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	font-size: 15px;
}
.style4 {
	color: #000000;
	font-size: 15px;
}
-->
</style></head>
 
 
 
</div>
 
 
<body leftmargin="auto auto" marginwidth="auto auto">
 
<div id="Layer1">
 
  <p class="style3"><em><font color="#000000">Some text  
    </font></em></p>
  <p class="style3"><font color="#000000"><em>&ndash;</em> Charles babbage </font></p>
</div>
<img src="http://forums.techarena.in/images/con.jpg" width="792" height="540" hspace="115" vspace="49" border="0" align="absmiddle" usemap="#Map" />
<map name="Map" id="Map">
  
<area shape="rect" coords="161,464,267,502" href="http://www.website.com/goal.html"  />
<area shape="rect" coords="25,465,97,501" href="http://www.website.com/home.html"  />
<area shape="rect" coords="496,464,617,503" href="http://www.website.com/portfolio.html"  />
<area shape="rect" coords="315,450,428,510" href="http://www.website.com/page.html" />
<area shape="rect" coords="668,469,723,512" href="http://www.website.com/contact.html"  />
</map>
 
</body>
</html>

**Zecho** · 09-02-2010

I was unable to see your background image that's why i used an image myself. I think that the ext appears in a box on the left side of the page, It is centered somewhat because absolute positioning takes the div outside the flow of the page, Coz it goes where you send it. It appears as you have two values for the "left". please try to mention the browser you are using.

**absolute55** · 09-02-2010

I have seen the code you posted and this you have implemented the code quiet nicely. Very little mistakes can be noticed in your codes i have tried to solve your problem and have implemented or corrected your code and go the result what you were expecting so just compare the following code with yours and i think that you will get the fix

Code:

<?xml version="1.0" encoding="iso-8859-1"?><!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>
<title>Website </title>
 
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
 
<!--
body
 
 
{
margin: auto auto;
padding: 0;
padding-top: 10px;
text-align: center;
 
}
#centered
{
width: 800px; /* set to desired width in px or percent */
text-align: auto; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: auto auto;
}
 
 
.style2 {
font-family: times new roman, monotype corsiva, sans-serif;
font-weight: bold;
}
.style3 {
font-family: times new roman, monotype corsiva, sans-serif;
font-weight: bold;
color: #000000;
font-size: 15px;
}
.style4 {
color: #000000;
font-size: 13px;
}
-->
</style></head>
 
 
 
</div>
 
 
<body leftmargin="auto auto" marginwidth="auto auto">
 
<div id="Layer1">
 
<p class="style3"><em><font color="#000000">We should take care not to make
the intellect our god; it has, of course, powerful muscles, but no personality
</font></em></p>
<p class="style3"><font color="#000000"><em>&ndash;</em>Albert Einstein</font></p>
</div>
<img src="images/contact.jpg" width="800" height="550" hspace="111" vspace="49" border="0" align="absmiddle" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="25,466,98,503" href="http://www.websiteinc.com/home.html" />
<area shape="rect" coords="161,464,267,502" href="http://www.websiteinc.com/mission.html" />
<area shape="rect" coords="496,464,617,503" href="http://www.websiteinc.com/portfolio.html" />
<area shape="rect" coords="325,465,438,502" href="http://www.websiteinc.com/up.html" />
<area shape="rect" coords="672,466,777,502" href="http://www.websiteinc.com/contact.html" />
</map>
 
</body>
</html>

**kelfro** · 09-02-2010

As i move through the code you have provided it appears to me that there are some small errors or you have not implemented some of the segments of your program quiet properly. So have a look at the program segment what i have posted and try replace this with the similar part of your code

Code:

#Layer1 {
	width:37%;
	z-index:1;
	margin: 2px;
	text-align: center;
	float: left;
	vertical-align: middle;
	background: #CCFFFF;
	padding: 12px 3% 22px;
}
#Layer2 {
	width:37%;
	z-index:1;
	margin: auto;
	text-align: center;
	float: right;
	vertical-align: middle;
	background: #FFFFCC;
	padding: 12px 3% 22px 3%;
}
#Layer3 {
	width:32%;
	z-index:1;
	margin: 2px 33%;
	text-align: center;
	vertical-align: middle;
	padding: 12px 2% 22px;
	background: #FFCCFF;
}