中心跨度在表格单元格

我试图将表格中的图像置于中心位置。我可以将它固定在单元格的底部或水平居中，但不能同时执行两个动作。是因为相对/绝对位置？中心跨度在表格单元格

<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垂直对齐。 –

中心跨度在表格单元格

回答

相关问题