变换上的HTML文本对齐问题

我想在html/css中渲染一行已转换的文本，但是我遇到了一些问题。当我缩放Y方向时，元素的整体对齐方式如图所示。变换上的HTML文本对齐问题

试图只需旋转在相同的错误将L 180度的结果。如何在文本的y缩放轴上保持垂直对齐？比方说，我也用小型大写字母做这个，对你的解决方案有任何改变？

这里怎么回事？

<style type="text/css" media="screen"> 
 
    #reflect{ 
 
    \t display: flex; 
 
    \t flex-basis: auto; 
 
    } 
 
    #reflectl { 
 
    \t /*transform: scaleX(-1) !important;*/ 
 
    \t transform: scale3d(-1,-1, 1); !important; 
 
    } 
 
    #reflecte { 
 
     \t transform: scaleX(-1) !important; 
 
    } 
 
    #reflectc { 
 
     \t transform: scaleX(-1) !important; 
 
    } 
 
</style> 
 

 
<text id=reflect> 
 
    <text id="reflectref">REF</text> 
 
    <text id="reflectl">L</text> 
 
    <text id="reflecte">E</text> 
 
    <text id="reflectc">C</text> 
 
    <text id="reflectt" >T</text> 
 
</text>

来源

2017-11-03 Skyler

这个问题似乎是，该元素是比它包含的文本较高，所以当你旋转，旋转中心是不完全的中间，所以当它这样做的文字稍微偏离。最简单的解决方案是将元素的高度设置为其所需的高度。

<style type="text/css" media="screen"> 
 
    #reflect{ 
 
    \t display: flex; 
 
    \t flex-basis: auto; 
 
    } 
 
    #reflect text { 
 
     height: 17px; 
 
    } 
 
    #reflectl { 
 
    \t /*transform: scaleX(-1) !important;*/ 
 
    \t transform: scale3d(-1,-1, 1); !important; 
 
    } 
 
    #reflecte { 
 
     \t transform: scaleX(-1) !important; 
 
    } 
 
    #reflectc { 
 
     \t transform: scaleX(-1) !important; 
 
    } 
 
</style> 
 

 
<text id=reflect> 
 
    <text id="reflectref">REF</text> 
 
    <text id="reflectl">L</text> 
 
    <text id="reflecte">E</text> 
 
    <text id="reflectc">C</text> 
 
    <text id="reflectt" >T</text> 
 
</text>

<style type="text/css" media="screen"> 
 
    #reflect{ 
 
    \t display: flex; 
 
    \t flex-basis: auto; 
 
    } 
 
    #reflect text { 
 
     height: 17px; 
 
    } 
 
    #reflectl { 
 
    \t /*transform: scaleX(-1) !important;*/ 
 
    \t transform: scale3d(-1,-1, 1); !important; 
 
    } 
 
    #reflecte { 
 
     \t transform: scaleX(-1) !important; 
 
    } 
 
    #reflectc { 
 
     \t transform: scaleX(-1) !important; 
 
    } 
 
</style> 
 

 
<text id=reflect> 
 
    <text id="reflectref">ref</text> 
 
    <text id="reflectl">l</text> 
 
    <text id="reflecte">e</text> 
 
    <text id="reflectc">c</text> 
 
    <text id="reflectt" >t</text> 
 
</text>

来源

2017-11-04 00:15:26 dave

我想这对我最初写这个问题上的浏览器，它似乎是功能性的。但是，在我的虚拟机（firefox 44）上运行较旧版本的firefox时，现在会使L太高，所以它似乎不能解决核心问题。这也会导致结果在小写字母文本上显着失败。 – Skyler

跟进更多。显然这是受字体大小影响的。我已经以12的间隔得到正确的旋转。 – Skyler

变换上的HTML文本对齐问题

回答

相关问题