时间戳

首页 > 解决方案 > 如何定位 innerHTML 纯文本？

javascript - 如何定位 innerHTML 纯文本？

问题描述

简单的问题，我如何格式化display.innerHTML的输出文本，以便我可以将它定位在确定的高度内？

var display = document.getElementById("display");
display.innerHTML = "RGB (" + red + ", " + green + ", " + blue + ")";

输出将是一个文本“ RGB(red,green,blue) ”。

这是 CSS ：

#display {
    height: 100px;
    background: #425779;
    transition: background 100ms;
    margin-top: 30px;
    border: 1px solid #000;
    
    text-align: center;
}

只想显示它垂直和水平居中。

标签： javascripthtmlcss

解决方案

在 2020 年，我最喜欢在容器中居中元素的方式是使用display: grid和place-items: center

#display {
  display: grid;
  place-items: center;
  height: 100px;
  background: #425779;
  transition: background 100ms;
  margin-top: 30px;
  border: 1px solid #000;
}
<div id="display">RGB(x, y, z)</div>

推荐阅读