2015-07-09 61 views
0

我無法在文字居中的我的TD中有一個colspan大於1,我已經將文字對齊中心添加到每一個標籤並且什麼也沒有。水平放置表格中的文字

HTML:(我刪除了所有但不會居中我已經離開了所有相關的這段文字標籤的項目之一)

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>

+0

[使用.css連接colspan =「2」的表數據中心文本的可能重複「選擇具有屬性colspan =」2「的td」](http://stackoverflow.com/questions/25594610/center-text -of-table-data-connected-with-colspan-2-with-css-select-td-with) – Jason

+0

嘗試添加'div {margin:auto;}',因爲它設置了寬度。 – Stickers

+0

可能的重複沒有幫助,因爲我使用Django使colspans的寬度變化。 @jason – user2788328

回答

0

的問題是你必須是包含display: table-cell。下面是它看起來如何去除:

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>

+0

我刪除了顯示:表格單元格 它的排序(它們以中間爲中心)將TD中的文本居中放置在不止一列但現在是一列的文本中左對齊。 @analytalica – user2788328

1

你的問題是:

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

display: table-cell讓元素像一個<td>,最有可能繼承了一些不同的東西。

+0

當我刪除它時,它會將所有東西都還原到左邊的中心,除了那些colspan大於1的中心。這些東西被移動到中心附近,但有時真的離中心很遠。 – user2788328

+0

使用'!重要'減號 –