How do I position innerHTML plain text?

Question

Simple question, how do I format the output text of display.innerHTML so that I can position it centered within a determined height?

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

The output will be a text "RGB(red,green,blue)".

This is the CSS :

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

Just wanna display it centered vertically and horizontally.

Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — kmoser, Aug 07 '20 at 03:45

score 2 · Accepted Answer · answered Jul 21 '20 at 01:41

My favourite way to center elements within a container in 2020 is using display: grid and 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>

How do I position innerHTML plain text?

1 Answers1