如何保持jQuery生成的文本爲中心

好吧，我正在做一個相框設計師。對於那些有興趣 here it is。我正在使用jQuery .keyup函數來生成文本。這裏是jQuery。如何保持jQuery生成的文本爲中心

$('#input').keyup(function() { 
    $('.text').html($(this).val()); 
    $('.text').css("text-align", "center"); 
});

和相應的HTML。

<input id="input" type="text" name="Text" value="Your words here"> 

<text class="text" transform="matrix(2.4428 0 0 1.5 235 550.5599)" font-family="'ComicSansMS'" font-size="41.6368">Your words here</text>

但是我的CSS並沒有保持居中，只要輸入新的文本。

.text { 
    fill:white; 
    font-family:'Open Sans', sans-serif, verdana; 
    text-align:center; 
    margin:auto; 
}

任何想法？謝謝。

來源

2014-09-02 jonneyboy99

我不認爲''是一個'HTML'標籤。你可能想要標記'SVG'。 – 2014-09-02 16:02:09

@TJ，他正在使用'SVG'。這只是沒有說明他提供的HTML。 – LcSalazar 2014-09-02 16:03:24

是的......這就是爲什麼我要求OP用'svg'標記問題... – 2014-09-02 16:04:38

嘗試改變將HTML屬性

transform="matrix(2.4428 0 0 1.5 600 550.5599)"

不要使用文本對齊屬性，你與SVG工作，所以正確的CSS屬性是

text-anchor: middle

參考 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

來源

2014-09-02 16:06:56

變換變化並沒有真正起作用。文本錨雖然有幫助。除了我希望它不是中心頁面，而是以我的「框架」或容器爲中心。 – jonneyboy99 2014-09-02 16:52:08

如何保持jQuery生成的文本爲中心

回答

相關問題