div内水平对齐SPAN（动态长度，无文本对齐）？

Question

我有这个代码：

 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即将托管将来的-injected-ajax -html，所以我不想碰它（开始玩remove / apply text-align:center ）。

我也可以做width:200px;display:block; 然后： margin:0 auto; 但我不知道它的长度。

所以在我去JS解决方案之前：

题

是否有仅CSS解决方案来确定跨度居中？

相关的jsbin： http ://jsbin.com/qokizunibifa/2/edit

Answer 1

添加display: table; margin: 0 auto; span使div内的span水平居中

 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> 

Answer 2

您可以尝试做的另一件事是使用trasform: translateX(-50%) ：

span {
    border:solid 2px green;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

演示： http ： //jsbin.com/fegesusuqido/1/edit