如何在 CSS 中使用不同的字体大小垂直和水平居中文本答案

【问题标题】：How to vertically and horizontally centre text with a variating font size in CSS如何在 CSS 中使用不同的字体大小垂直和水平居中文本
【发布时间】：2016-07-28 05:54:17
【问题描述】：

我正在尝试创建一个简单的 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>

【问题讨论】：

我有一些 java 脚本可以根据您按下的按钮以 + 或 - 1 的增量更改字母“abc”的字体大小。由于某种原因，这些按钮后面的 java 脚本在这个编辑器中根本不起作用（可能是因为它是为扩展而不是为普通网页编写的）所以我把它省略了，因为它只是导致了一个不相关的错误（脚本有效完美在扩展中）感谢您的回复！
我刚刚为您发布了 Javascript，谢谢 :)

标签： html css fonts position css-position

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

感谢您的回复！这几乎可以工作，但是变量“FS”不再影响“abc”的显示字体大小。我现在添加了 Javascript，以便您知道它是如何工作的
我更新了我的 codePen，link，使用了可以工作的 js。我还在开始时添加了 FS 变量初始化，因此初始字体大小将从 .tester 类中获取，并且可以在 css 中设置。但基本上为了让你的js代码工作，你需要设置abc.style.fontSize = FS + 'px';所以在最后添加'px'，这样样式才能正确解释。
太棒了！非常感谢您的帮助:)

【解决方案2】：

你可以试试这个

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

【讨论】：