Question

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

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

使用扩展程序UI（弹出窗口）时出现问题。我想要这些字母＆＃39; abc＆＃39;在垂直和水平方向位于盒子的正中央，但每当我按下增加字体大小按钮时，字母“abc”和“＃”;离开中心，即使文本对齐中心，指定行高，垂直对齐设置为中间。

有什么想法吗？谢谢:)）

＆＃13;

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());
		});
	});
}

＆＃13;

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:;
}

＆＃13;

<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>

＆＃13;

Answer 1

你可以试试这个

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

Answer 2

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

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

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

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

该框具有其父级的100％高度，即#tester。我把#tester的位置设置为绝对并且具有.wrapper的全高，所以你可以通过设置包装器的高度来改变小部件的高度，'abc'将始终位于.wrapper和.tester高度的中间。 / p>

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

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

如何在CSS中使用变化的字体大小垂直和水平居中文本

2 个答案: