css字体垂直方向显示,如何在CSS中以垂直和水平方向居中放置变化字体的文本

我试图创建一个简单的Chrome扩展，允许用户设置可以在网页上显示的最小字体大小(这对于视力受损的人，不能看到小字号)如何在CSS中以垂直和水平方向居中放置变化字体的文本

扩展名只会查看网页，如果有任何字体设置低于用户指定的最小字体大小，如果是这样，那么字体大小将相应增加。

我的问题在使用扩展UI(弹出窗口)时发生。 我想让字母'abc'在盒子的正中间，垂直和水平，但是每当我按下增加字体大小按钮时，字母'abc'偏离中心，即使文字对齐中心，线条高度也是指定和垂直对齐设置为中间。

任何想法？谢谢:)

var FS = 20;

var abc = document.getElementById("tester");

var SmlBtn = document.getElementById("SizeMns");

var BigBtn = document.getElementById("SizePls");

if(SmlBtn != null){

SmlBtn.addEventListener('click', function() {

FS = FS - 1;

\t \t console.log(FS);

\t \t abc.style.fontSize = FS;

\t \t chrome.storage.sync.set({'fontSize': FS}, function() {

\t \t // Notify that we saved.

\t \t console.log('your font size has been saved to ' + FS.toString());

\t \t });

});

}

if(BigBtn != null){

\t BigBtn.addEventListener('click', function() {

\t \t FS = FS + 1;

\t \t console.log(FS);

\t \t abc.style.fontSize = FS;

\t \t chrome.storage.sync.set({'fontSize': FS}, function() {

\t \t // Notify that we saved.

\t \t console.log('your font size has been saved to ' + FS.toString());

\t \t });

\t });

}

html {

text-align: center;

width: 290px;

\t height: 590px;

}

body {

position: relative;

overflow-x: hidden;

overflow-y: auto;

display: inline-block;

min-height: 200px;

max-height: 590px;

min-width: 285px;

max-width: 290px;

margin: 0;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

font-family: 'Segoe UI', 'PT Sans', 'Helvetica Neue', 'FreeSans', sans-serif;

font-size: 20px;

font-weight: 400;

color: #43435e;

text-align: center;

background: #ffffff;

cursor: default;

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

user-select: none;

}

.header {

\t display: block;

\t background-color:#00b7f1;

\t color: #;

\t padding:;

\t height:50px;

\t line-height: 46px;

\t font-size:25;

\t font-weight:600

}

.content {

\t position: fixed;

bottom: 0;

width: 290px;

\t height: 46px;

\t line-height: 40px;

\t padding: 0px;

\t background-color: rgba(0,0,80,0.6);

}

#tester {

\t vertical-align: middle;

\t text-align: center;

\t display: table-cell;

\t vertical-align: middle;

\t padding:;

}

\t

\t \t

\t

\t

\t \t

Increase Font Size

\t \t \t \t

abc

\t \t \t

\t \t \t \t -

\t \t \t \t +

\t \t \t

\t \t

\t

2016-07-27

Jake

+0

我有一些java脚本，根据你按下的按钮，通过+或 - 1的增量改变字母'abc'的字体大小。 出于某种原因，这些按钮后面的java脚本在这个编辑器中根本不起作用(可能是因为它是为扩展而不是为普通网页编写的)，所以我把它留在了外面，因为它只是导致了一个无关的错误脚本完美的扩展名) 感谢您的回复！ –

+0

我刚刚为您发布了Javascript，谢谢:) –