我正在尝试创建一个简单的 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>最佳答案
你可以试试我在 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;
}
盒子的高度是其父元素的 100%，即#tester。我将#tester position 设置为绝对位置并具有 .wrapper 的完整高度，因此您可以通过设置 wrapper 的高度来更改小部件的高度，'abc' 将始终位于 .wrapper 和 .tester 高度的中间。
不过，现在当您更改字体大小时，abc 将垂直和水平居中，我希望这是您想要完成的。
因此，您可以尝试在我的示例中的 .tester 类中更改字体大小，以查看“abc”是否自动对齐。
关于html - 如何在 CSS 中垂直和水平居中具有不同字体大小的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38622157/