中心跨度在表格單元格

我試圖將表格中的圖像置於中心位置。我可以將它固定在單元格的底部或水平居中，但不能同時執行兩個動作。是因爲相對/絕對位置？中心跨度在表格單元格

<body> 
 
<style> 
 
#sum td{ 
 
\t position:relative; 
 
\t text-align:center !important; 
 
\t vertical-align: center; 
 
\t width:400px; 
 
\t } 
 
#sum tr{ 
 
\t height:280px; 
 
\t } 
 
#sum td span{ 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t display:block; 
 
\t text-align:right; 
 
\t } 
 
</style> 
 

 
<content> 
 
\t <div> 
 
\t \t <ul> 
 
\t \t \t <table id="sum"> \t 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="col-md-4"> 
 
\t \t \t \t \t \t <li><img class="pic"src="#"> 
 
\t \t \t \t \t \t <span>xxx 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> \t 
 
\t \t \t </table> 
 
\t \t </ul> 
 
\t </div> 
 
</content> 
 
</body>

來源

2017-02-11 Anna Štulcová

如果你只是想居中圖像下方的文本，無需絕對定位。此外，您還隨機將ul和li元素與表格混合在一起，並且您使用它的方式無效。

<head> 
 
    <style> 
 
    #sum td{ 
 
    \t position:relative; 
 
    \t text-align:center !important; 
 
    \t vertical-align: center; 
 
    \t width:400px; 
 
    \t } 
 
    #sum tr{ 
 
    \t height:280px; 
 
    \t } 
 
    #sum td span{ 
 
    \t display:block; 
 
    \t text-align:center; 
 
    \t } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <content> 
 
    <div> 
 
     <table id="sum"> 
 
     <tr> 
 
      <td class="col-md-4"> 
 
      <img class="pic" src="https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg"> 
 
      <span>xxx</span> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </content> 
 
</body>

如果你想使用絕對定位，將定位文本在圖像上，而不是它的下面。要使文本跨越其父項的整個寬度，您需要將position: relative;添加到父項，然後將width: 100%;或left: 0; right: 0;添加到跨度。

<head> 
 
    <style> 
 
    #sum td{ 
 
    \t position:relative; 
 
    \t text-align:center !important; 
 
    \t vertical-align: center; 
 
    \t width:400px; 
 
    \t } 
 
    #sum tr{ 
 
    \t height:280px; 
 
    \t } 
 
    #sum td { 
 
     position: relative; 
 
    } 
 
    #sum td span{ 
 
    \t text-align:center; 
 
     position: absolute; 
 
     left: 0; right: 0; 
 
     bottom: 0; 
 
    \t } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <content> 
 
    <div> 
 
     <table id="sum"> 
 
     <tr> 
 
      <td class="col-md-4"> 
 
      <img class="pic" src="https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg"> 
 
      <span>xxx</span> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </content> 
 
</body>

來源

2017-02-11 17:21:34

的probem是我有不同大小的圖像，我必須包括關於底部位置的線的另一種方式的文本沒有垂直對準。 –

@AnnaŠtulcová我不明白。一定要在OP中明確指出問題，這樣我們就不會浪費彼此的時間。你沒有提到其他圖像，爲什麼你必須使用底部定位，或任何關於你的OP垂直對齊。 –

中心跨度在表格單元格

回答

相關問題