如何在 CSS 中垂直和水平居中具有不同字体大小的文本

Question

我正在尝试创建一个简单的 chrome 扩展程序，允许用户设置可以在网页上显示的最小字体大小（这对于看不到小字体的视障人士很有用尺码）

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

我的问题发生在使用扩展 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;
  console.log(FS);
  abc.style.fontSize = FS;
  chrome.storage.sync.set({'fontSize': FS}, function() {
    // Notify that we saved.
    console.log('your font size has been saved to ' + FS.toString());
  });
    });
}

if(BigBtn != null){
 BigBtn.addEventListener('click', function() {
  FS = FS + 1;
  console.log(FS);
  abc.style.fontSize = FS;
  chrome.storage.sync.set({'fontSize': FS}, function() {
    // Notify that we saved.
    console.log('your font size has been saved to ' + FS.toString());
  });
 });
}

html {
    text-align: center;
    width: 290px;
 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 {
 display: block;
 background-color:#00b7f1;
 color: #;
 padding:;
 height:50px;
 line-height: 46px;
 font-size:25;
 font-weight:600
}

.content {
 position: fixed;
    bottom: 0;
    width: 290px;
 height: 46px;
 line-height: 40px;
 padding: 0px;
 background-color: rgba(0,0,80,0.6);
}

#tester {
 vertical-align: middle;
 text-align: center;
 display: table-cell;
 vertical-align: middle;
 padding:;
}

<html>

 <head>
  <link rel="stylesheet" type="text/css" href="popup.css">
 </head>

 <body>
  <div class="header">Increase Font Size</div>
    <p id="tester" font-size="FS">abc</p>
   <div class="content">
    <button type="button" id="SizeMns">-</button>
    <button type="button" id="SizePls">+</button>
   </div>
  <script src="popup.js"></script>
 </body>
</html>

Answer 1

你可以试试这个

<body align="center">
    <p id="tester" font-size="FS">abc</p>
</body>

Answer 2

你可以试试我在 codePen 中快速实现的东西，它会保持字体垂直和水平对齐。

http://codepen.io/kmlzjc/pen/bZKrpx

基本上要垂直对齐 'abc' 标签，您需要一个参考框，该标签将对齐到该参考框的高度。我在我的代码示例中使用 :before 属性创建它，但是您可以在 'abc' 文本之前在 #tester 中放置一个或其他内容，并按照与 :before 相同的方式设置样式，您将完成同样的事情。

.tester:before {
  content: ' ';
  display: inline-block;
  width: 0;
  height : 100%;
  vertical-align: middle;
}

盒子的父级为 #tester 的高度为 100%。我将#tester position 设置为绝对位置并具有 .wrapper 的完整高度，因此您可以通过设置 wrapper 的高度来更改小部件的高度，'abc' 将始终位于 .wrapper 和 .tester 高度的中间.

不过，现在当你改变字体大小时，abc 将垂直和水平居中，我希望这是你想要完成的。

因此，您可以尝试在我的示例中更改 .tester class 中的字体大小，以查看 'abc' 是否自动对齐。

如何在 CSS 中垂直和水平居中具有不同字体大小的文本

How to vertically and horizontally centre text with a variating font size in CSS

html

css

fonts

position

css-position