我怎樣才能居中不同寬度的僞元素？

我想居中一個工具提示，它可以根據content屬性具有不同的寬度。我怎樣才能居中不同寬度的僞元素？

我在這個example看到我們可以對僞類進行修改，但是看起來有點複雜。

$(".tooltip").prop('id', function(i){ 
    return "p_number_"+i; 
}).hover(function() { 
    var width = window.getComputedStyle(this, ':after').getPropertyValue('width'); 
    document.styleSheets[0].addRule('#'+this.id+':after','margin-left: -"'+width/2+'px";'); 
})

有沒有最簡單的解決方案？

來源

2015-07-03 Youssef

給一個唯一的ID到元素，並做'「＃「+ this.id +」：在「'後面。 –

爲什麼不直接切換一個班級？你能提供一個jsFiddle複製問題，並更好地解釋預期的行爲？另請參閱：http://mywiki.wooledge.org/XyProblem和FYI，您的'hover（）'方法語法用於輸入/輸出處理程序，這意味着您的代碼將在mouseenter和mouseleave中調用，當然不是您想要的。 –

什麼是'what_to_do_here'？ 'what_to_do_here'。.tooltip'元素？是否需要在''.tooltip''懸停''僞元素後添加'width'到'what_to_do_here''？可以創建stacksnippets，jsfiddle http://jsfiddle.net來演示嗎？ – guest271314

僞元素管理起來很麻煩。通常，當變化是靜態的時候，你可以切換一個類（就像它的例子）。但就你而言，每個元素都有不同的寬度，這使得它更難控制。

幸運的是，您不需要JavaScript來將僞元素居中。如果使用you don't care about IE8，則可以使用CSS transform。不要給出一半寬度的負邊距，請給它一個transform:translate(-50%,0);。它水平居中。如果您需要垂直居中，使用transform:translate(-50%,-50%);

來源

2015-07-03 17:17:52

由於該元素具有絕對或相對位置，那麼你可以使用這個CSS居中僞元素

position: absolute; 
left: 50%; 
transform: translateY(-50%);

來源

2015-07-03 17:19:01

感謝他的工作:) – Youssef

我怎樣才能居中不同寬度的僞元素？

回答

相關問題