Aligning a text box to center

likwidmonster · April 15, 2009

Hello,

I have been wondering how I could align a text boc to center so that it could match a centered picture background.

Any help would be appreciated!

Thanks,

likwidmonster

FaT3oYCG · April 15, 2009

? that doesnt make much sense, but you might want to try some <center></center> tags

haku · April 15, 2009

...or not. <center> tags are deprecated.

OP: Add a left and top margin to the textbox, and adjust the amount of margin until it's positioned where you want. Make sure you test it on multiple browsers though, as it's the kind of thing that can go a little funky in other browsers.

FaT3oYCG · April 15, 2009

really, i dint know center was deprecated, in any case use span tags then

<span stlye="align:center;">thing to align</span>

louisstephens · April 15, 2009

If you want the div centered on the page you could in your css add:

margin-right:auto;
margin-left:auto;

This would center it directly in the middle.

likwidmonster · April 17, 2009

I, am sorry but none of these worked.

Thanks for your help anyway.

I would like something like this. http://www.ndesign-studio.com/

xtopolis · April 17, 2009

Look at their code:

body {
margin:0px auto;
padding:0px;
font: 70%/160% Verdana, Arial, Helvetica, sans-serif;
width: 770px;
color: #333333;
position: relative;
background: #181A2F url(images/home-bg.jpg) no-repeat center top;
}

Look at their bg image directly and you'll understand what they did: http://www.ndesign-studio.com/wp-content/themes/phoenix/images/home-bg.jpg

They have an image of ~770px in width and have the page background color match the image background color. They center the image to the body of the page, and enclose the rest of their main content with a div to keep it within the boundaries of their image:

#body_wrap {
width:743px;
margin: 0 auto 0 -1px;
padding: 10px 12px 40px 15px;
background: #FFFFFF url(images/content-corner-bg.gif) no-repeat left bottom;
clear:both;
}

Pretty cool I might add.

likwidmonster · April 17, 2009

So are you saying by using

#body_wrap {
   width:743px;
   margin: 0 auto 0 -1px;
   padding: 10px 12px 40px 15px;
   background: #FFFFFF url(images/content-corner-bg.gif) no-repeat left bottom;
   clear:both;
}

I can have a centered text box. (I, am not trying to sarcastic).

Thanks for all your help I really appreciate it. :)

xtopolis · April 18, 2009

No.

They have the BODY element style with a background picture that is place RELATIVE TO THE PAGE BODY in the center, top; and it does not repeat.

Then they have a DIV that is 770px in width (similar to the picture size above) that is centered so that it APPEARS to be inside the background image (which is shaped like a container).

[i am not going to code this for you.]

likwidmonster · April 18, 2009

Thanks you for your help...

But I don't understand how the text box is centered... I know how to make it. I dragged the coding right in from n-design studio and make it work perfect except for the centering. If you could tell me how to do that it would be a big help to me!

xtopolis · April 18, 2009

Show us your code in [ code] tags and we'll help you fix it. And possibly provide a link to your site.

likwidmonster · April 18, 2009

This is my HTML

<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Language" content="en-us">
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Untitled - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >

<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="style_menu.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
<!--
body {
background-image: url(home-bg.jpg);
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
background-color: #000000;
background-position:top
}
#Layer1 {
position:absolute;
width:681px;
height:630px;
z-index:1;
left: 288px;
top: 311px;
}
#Layer2 {
position:absolute;
width:257px;
height:31px;
z-index:2;
left: 83px;
top: 197px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
} 
#wrap {
    width: 800px;
    margin: auto auto;
}
.style27 {color: #FFFFFF}
-->
</style>
</head>

<div class="body_wrap" id="Layer1">Content for  class "body_wrap" id "Layer1" Goes Here</div>
</body>

</html>

This is my CSS

/* Global Styles */

body {
margin:0px;
}
#body_wrap {
width:743px;
margin: 0 auto 0 -1px;
padding: 10px 12px 40px 15px;
background: #FFFFFF;
clear:both;
}
td {
font:11px Arial, Helvetica, sans-serif;
color:#000000;
}

a {
color: #CC0000;
font-weight:bold;
text-decoration:none;
}

a:hover {
color: #990000;
}

/* ID Styles */

#navigation a {
font:10px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
letter-spacing:0.1em;
line-height:16px;
display:block;
padding: 0px 10px;
border-right:1px solid #CC0000;
}

#navigation a:hover {
color:#ffffff;
background: #CC0000;
}

#background td {
background:url("mm_bg_header.gif");
}

#padding {
padding:14px;
}

.box  {
background: #FFFFFF url(../images/mainboxes-bg2.jpg) repeat-x top left;
border: 1px solid #F4F4F4;
min-height: 150px;
max-width: 660px;
left: 126px;
top: 311px;
width: 696px;
height: 507px;
}
/* Calendar Styles */

#calendar td {
border: 1px solid #26354A; 
}

#noborder td {
border: 0px;
}

#calheader td {
font-weight:bold;
color: #ffffff;
}

/* Class Styles */

.logo {
font:24px Times New Roman, Times, serif;
color: #CC0000;
letter-spacing:0.3em;
line-height:26px;
}

.tagline {
font: 11px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:16px;
}

.bodyText {
font:11px Arial, Helvetica, sans-serif;
line-height:22px;
color:#FFFFFF;
letter-spacing:0.1em;
}

.detailText {
font:11px Arial, Helvetica, sans-serif;
line-height:16px;
color:#26354A;
letter-spacing:.1em;
}

.pageName {
font:24px Arial, Helvetica, sans-serif;
color: #CC0000;
letter-spacing:0.2em;
line-height:32px;
}

.subHeader {
font:bold 12px Arial, Helvetica, sans-serif;
color: #2D374D;
font-weight:bold;
line-height:20px;
letter-spacing:.1em;
}

.body_wrap {
margin-right:auto;
margin-left:auto;
}

Thank you very much for your patience... I really appreciate it.

likwidmonster · April 18, 2009

I think I figured out a way...

<table cellpadding="0" cellspacing="0" width="663" height="515" align=center>>
<tr>
	<td height="515" width="663">
	 <p> </p>
	<p> </p>
	<p> </p>
	<p> </p>
	<p> </p>
	<p>hi</td>
</tr>
</table>

If this is a good way could you tell me how to make cell padding at the top.

likwidmonster · April 19, 2009

I realized that this isn't a good way. I figured out how to center a text box but I don't know how to make it so that it scrolls down the page. Instead I wish that it would scroll down the page.

My Code

<!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=UTF-8">
<title>CSS Centering: Auto-width Margins</title>
<style type="text/css" media="screen">
@import "general.css"; /* Mostly just text styling. */

body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}

#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
</style>
</head><body>

<div id="Content">
<h1>Centering: Auto-width Margins</h1>

<p>This
box is horizontally centered by setting its right and left margin
widths to "auto". This is the preferred way to accomplish horizontal
centering with CSS, and works very well in most browsers with CSS2
support. Unfortunately, IE5/Win does not respond to this method - a
shortcoming of that browser, not the technique.</p>
<p>There is a simple <em>workaround</em>.
(A pause while you fight back the nausea induced by that word.) Ready?
IE5/Win incorrectly applies the CSS "text-align" attribute to
block-level elements. Declaring "text-align:center" for the containing
block-level element (often the BODY element) horizontally centers the
box in IE5/Win. There is a side effect of this workaround: the CSS
"text-align" attribute is inherited, centering inline content. It is
often necessary to explicitly set the "text-align" attribute for the
centered box, counteracting the effects of the IE5/Win workaround. The
relevant CSS follows.</p>
<pre>body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
</pre>
</div>

<!-- BlueRobot was here. -->

</body></html>

Thanks for all of your help!

Sign In

Aligning a text box to center

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information