Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 627

Oct 16th, 2009

Probably very simple text centering quesiton

Expand Post »

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:

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

Similar Threads

text editor help in C#
Simple text Verification in PHP
C2446 Error for simple text based adventure in C++
simple text editor in C++
A simple text editor. How??!! in C++

dgr231

Reputation Points: 55

Solved Threads: 7

Junior Poster in Training

Offline

76 posts
since Aug 2009

Permalink

Oct 16th, 2009

Re: Probably very simple text centering quesiton

Please check if this solves your issue:

(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>

webexpertzhere

Reputation Points: 11

Solved Threads: 9

Light Poster

Offline

27 posts
since Oct 2009

Permalink

Oct 16th, 2009

Re: Probably very simple text centering quesiton

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

dgr231

Reputation Points: 55

Solved Threads: 7

Junior Poster in Training

Offline

76 posts
since Aug 2009

Permalink

Oct 16th, 2009

Re: Probably very simple text centering quesiton

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.

webexpertzhere

Reputation Points: 11

Solved Threads: 9

Light Poster

Offline

27 posts
since Oct 2009

Permalink

Oct 16th, 2009

Re: Probably very simple text centering quesiton

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

webexpertzhere

Reputation Points: 11

Solved Threads: 9

Light Poster

Offline

27 posts
since Oct 2009

Permalink

Oct 17th, 2009

Re: Probably very simple text centering quesiton

Yes, it does. Thank you very much for your help.

Regards,
D

dgr231

Reputation Points: 55

Solved Threads: 7

Junior Poster in Training

Offline

76 posts
since Aug 2009

Permalink

Oct 17th, 2009

Re: Probably very simple text centering quesiton

You are welcome and Thanks for updating!

webexpertzhere

Reputation Points: 11

Solved Threads: 9

Light Poster

Offline

27 posts
since Oct 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: How would I do this in CSS? Newby pulling hair out.

Next Thread in HTML and CSS Forum Timeline: On zoom out, content cracks

DaniWeb Message

Cancel Changes

User Name
Password