HTML and CSS

Probably very simple text centering quesiton

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Aug 2009

Posts: 73

Reputation: dgr231 is on a distinguished road

Solved Threads: 7

dgr231

Offline

Junior Poster in Training

Probably very simple text centering quesiton

Oct 16th, 2009

Hello all,

I am in the process of teaching myself CSS to go along with my beginner-intermediate knowledge of HTML. I am just starting with CSS and have created a small test file to attempt to create a table with one row and one cell in that row. I then want to display white text that is centered in the one cell. Below is the current code that I have:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eBay Test Ad</title>
<style type="text/css">
table.toptable
{
  background-color: #000;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  display: block;
  width: 900px;
  position: relative;
}
span.testtext
{
  text-align: center;
  color: #fff;
  font-family: Arial, sans serif;
  font-weight: bold;
  font-size: 32px;
}
 
 
</style>
</head>
<body>
  <table class="toptable">
    <tr>
      <td>
        <span class="testtext">This is only a test...</span>
      </td>
    </tr>
  </table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eBay Test Ad</title>
<style type="text/css">
table.toptable
{
  background-color: #000;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  display: block;
  width: 900px;
  position: relative;
}
span.testtext
{
  text-align: center;
  color: #fff;
  font-family: Arial, sans serif;
  font-weight: bold;
  font-size: 32px;
}
  

</style>
</head>
<body>
  <table class="toptable">
    <tr>
      <td>
        <span class="testtext">This is only a test...</span>
      </td>
    </tr>
  </table>
</body>
</html>

It seems to me that by having the statement:

text-align: center;

in the definition of .testtext that it should center this text. I sure this is a very simple fix and I'm just missing something cursory, but any help would be greatly appreciated.

Thanks,
D

•

Join Date: Oct 2009

Posts: 15

Reputation: webexpertzhere is an unknown quantity at this point

Solved Threads: 6

webexpertzhere webexpertzhere is offline

Offline

Newbie Poster

Oct 16th, 2009

Please check if this solves your issue:

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eBay Test Ad</title>
<style type="text/css">
table.toptable
{
background-color: #000;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
display: block;
width: 900px;
position: relative;
}
.testtext
{
text-align:center;
color: #fff;
font-family: Arial, sans serif;
font-weight: bold;
font-size: 32px;
width:900px;
}
</style>
</head>
<body>
<table class="toptable">
<tr>
    <td class="testtext">This is only a test...</td>
</tr>
</table>
</body>
</html>

•

Join Date: Aug 2009

Posts: 73

Reputation: dgr231 is on a distinguished road

Solved Threads: 7

dgr231

Offline

Junior Poster in Training

Oct 16th, 2009

webexpertzhere,

Thank you very much! It works now. I now understand that the cell itself has to be specified to a certain width for this to work. One more question I have is:

I understand why this works the way you have corrected it, but it seems like the primary thing that was changed was the addition of the width attribute and placing all of the attributes on the cell. After getting it to work, I attempted to add a width attribute to the cell and keep the rest of the attributes on the span and it did not work. Why is it that all of the attributes need to be attributed to the cell and cannot be attributed to the span?

Thanks again for your help.

Regards,
D

•

Join Date: Oct 2009

Posts: 15

Reputation: webexpertzhere is an unknown quantity at this point

Solved Threads: 6

webexpertzhere webexpertzhere is offline

Offline

Newbie Poster

Oct 16th, 2009

If you definitely want to put the text inside a separate tag within the cell, you can proceed to use the 'div' tag. It will solve your purpose.

According to my understanding a span tag is normally used only to format text and not position it. But I am not sure if I am 100% right about it.

•

Join Date: Oct 2009

Posts: 15

Reputation: webexpertzhere is an unknown quantity at this point

Solved Threads: 6

webexpertzhere webexpertzhere is offline

Offline

Newbie Poster

Oct 16th, 2009

If you still want to proceed with the 'span' tag include this property also in the class 'testtext' which you are applying for the span :
display:block;

When we dont use this property a span tag spans upto the length of the text only. That is why you are unable to bring it to the center.

Please let me know if this solves your problem