Question

我正试图将俘虏放在桌子中的图像下方。我可以将它固定在单元格的底部或水平居中但不能同时处理两个动作。是因为相对/绝对位置？

<body>
<style>
#sum td{
	position:relative;
	text-align:center !important;
	vertical-align: center;
	width:400px;
	}
#sum tr{
	height:280px;
	}
#sum td span{
	position:absolute;
	bottom:0;
	display:block;
	text-align:right;
	}
</style>

<content>
	<div>
		<ul>
			<table id="sum">	
				<tr>
					<td class="col-md-4">
						<li><img class="pic"src="#">
						<span>xxx
						</span>
						</li>
					</td>
				</tr>	
			</table>
		</ul>
	</div>
</content>
</body>

Answer 1

如果您只想将图像置于图像下方，则无需进行绝对定位。此外，您还会将随机ul和li元素与表格混合在一起，并且您使用它的方式无效。

<head>
  <style>
    #sum td{
    	position:relative;
    	text-align:center !important;
    	vertical-align: center;
    	width:400px;
    	}
    #sum tr{
    	height:280px;
    	}
    #sum td span{
    	display:block;
    	text-align:center;
    	}
  </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{
    	position:relative;
    	text-align:center !important;
    	vertical-align: center;
    	width:400px;
    	}
    #sum tr{
    	height:280px;
    	}
    #sum td {
      position: relative;
    }
    #sum td span{
    	text-align:center;
      position: absolute;
      left: 0; right: 0;
      bottom: 0;
    	}
  </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>

中心跨度表格单元格

1 个答案: