CODEWITHSUNDEEP
htmlcss
Ack
Ack

Reputation: 275

Horizontally Centering text inside a table

I can't get text to center in my TDs that have a colspan greater than 1, I've added text-align center to every single tag and nothing.

HTML: ( I removed all but one of the items that wouldn't center I've left all the tags that are relevant to this text ) 

div.OBJ {
  display: table-cell;
  text-align: center;
}
div.scroll {
  width: 100%;
  height: 600px;
  overflow-y: scroll;
  overflow-x: auto;
  text-align: center;
}
td {
  text-align: center;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
  align: center;
  text-align: center;
}
a:link {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:visited {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:hover {
  color: #ff0000;
  text-decoration: underline;
  text-align: center;
}
div {
  text-align: center;
}
span {
  text-align: center;
}
<div class="scroll">
  <table border="1" style="width:100%">
    <tr id="{{ParentObject.id}}">
      <td id="{{ParentObject.id}}" colspan="{{object.size}}" style="background-color:{{object.bgColor}}" data-begin="{{object.begin}}" data-end="{{object.end}}">
        {% multiply object.size colWidth as colSize %}
        <div id="{{object.id}}" class="OBJ" style="width:{{colSize}}%">
          <a id="{{object.id}}" href="link" title="hover text">
            <span id="{{object.id}}" class="object">
                            {{object.name}}
                        </span>
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 71

Answers (2)

user5100083
user5100083

Reputation:

your problem is: 

div.OBJ {
        display: table-cell;
        text-align: center;
    }

display: table-cell lets the element behave like a <td> and most likely inherits something differently.

Upvotes: 1

heartyporridge
heartyporridge

Reputation: 1201

The problem is you have is div.OBJ contains display: table-cell. Here's how it looks removed:

div.OBJ {
  text-align: center;
}
div.scroll {
  width: 100%;
  height: 600px;
  overflow-y: scroll;
  overflow-x: auto;
  text-align: center;
}
td {
  text-align: center;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
  align: center;
  text-align: center;
}
a:link {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:visited {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:hover {
  color: #ff0000;
  text-decoration: underline;
  text-align: center;
}
div {
  text-align: center;
}
span {
  text-align: center;
}
<div class="scroll">
  <table border="1" style="width:100%">
    <tr id="{{ParentObject.id}}">
      <td id="{{ParentObject.id}}" colspan="{{object.size}}" style="background-color:{{object.bgColor}}" data-begin="{{object.begin}}" data-end="{{object.end}}">
        {% multiply object.size colWidth as colSize %}
        <div id="{{object.id}}" class="OBJ" style="width:{{colSize}}%">
          <a id="{{object.id}}" href="link" title="hover text">
            <span id="{{object.id}}" class="object">
                            {{object.name}}
                        </span>
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>

Upvotes: 0

Related Questions