我有这段代码:
table
{
border:solid 2px black;
width:100%; /*must*/
}
td
{
border:solid 2px red;
padding:5px;
}
span
{
border:solid 2px green;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<span >There's already existing policy for : fugfuj tyutyuty</span>
</td>
</tr>
</body>
</html> 
我想将 span 对齐到 TD 的中心。
我可以做 text-align:center 但 TD 即将托管 future -injected-ajax -html 所以我不想碰它(和开始使用 remove/apply text-align:center )。
我也可以做 width:200px;display:block; 然后:margin:0 auto; 但我不知道它的长度。
所以在我开始 JS 解决方案之前:
问题
是否有任何仅使用 CSS 的解决方案来使跨度居中？
最佳答案
将 display: table; 和 margin: 0 auto; 添加到 span 中，使 span 水平居中div
table {
border:solid 2px black;
width:100%; /*must*/
}
td {
border:solid 2px red;
padding:5px;
}
span {
border:solid 2px green;
display: table;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<span>There's already existing policy for : fugfuj tyutyuty</span>
</td>
</tr>
</table>
</body>
</html>关于html - 在 div 内水平对齐 SPAN(动态长度，无文本对齐)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26084604/