Member Avatar for dgr231

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:

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

  • 2 Contributors
  • 6 Replies
  • 131 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by webexpertzhere
Member Avatar for webexpertzhere

Please check if this solves your issue:

<!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;
}
[B].testtext[/B]
{
text-align:center;
color: #fff;
font-family: Arial, sans serif;
font-weight: bold;
font-size: 32px;
[B]width:900px;[/B]
}
</style>
</head>
<body>
<table class="toptable">
<tr>
    [B]<td class="testtext">This is only a test...</td>[/B]
</tr>
</table>
</body>
</html>
Member Avatar for dgr231

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

Member Avatar for webexpertzhere

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.

Member Avatar for webexpertzhere

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

Member Avatar for dgr231

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

Regards,
D

Member Avatar for webexpertzhere

You are welcome and Thanks for updating!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.