Centralize content

Question

I’m making a keyboard in HTML and CSS but I’m not able to center the content, or is left as in the example below or right, how can I center?

#calculator {
  width: 720px;
  height: auto;
  padding: 0;
  border-radius: 5px;
}

.keys {
  overflow: hidden;
}

.keys span {
  float: left;
  position: relative;
  top: 0;
  background: #FFFF00;
  font-size: 24px;
  cursor: pointer;
  width: 64px;
  height: 42px;
  border-radius: 5px;
  box-shadow: 0px 4px rgba(206, 206, 0, 1);
  margin: 0 7px 11px 0;
  color: #000;
  line-height: 44px;
  text-align: center;
  user-select: none;
  outline: 0 solid;
  transition: all 0.2s ease;
}

.keys span:hover {
  background: #fff;
  color: #000;
}

.keys span:active {
  box-shadow: 0px 0px #6b54d3;
  top: 4px;
}

<div id="calculator">
  <div class="keys">
    <span>Q</span>
    <span>W</span>
    <span>E</span>
    <span>R</span>
    <span>T</span>
    <span>Y</span>
    <span>U</span>
    <span>I</span>
    <span>O</span>
    <span>P</span>
    <div style="clear: both"></div>
    <span>A</span>
    <span>S</span>
    <span>D</span>
    <span>F</span>
    <span>G</span>
    <span>H</span>
    <span>J</span>
    <span>K</span>
    <span>L</span>
    <div style="clear: both"></div>
    <span>Z</span>
    <span>X</span>
    <span>C</span>
    <span>V</span>
    <span>B</span>
    <span>N</span>
    <span>M</span>
    <span>Ç</span>
    <div style="clear: both"></div>
    <span style="width: 350px"> </span>
    <span><<</span>
  </div>
</div>

https://codepen.io/anon/pen/JqxQqQ

Answer 1

You are using float: left in spans, so it’s all left.

Remove the float: left and add two properties:

vertical-align: top;
display: inline-block;

The first to align the elements vertically, and the second (display) so spans can be resized.

And finally put the properties font-size: 0; (to remove spaces between spans) and text-align: center; (to center horizontally) on div#calculator:

#calculator {
  width: 720px;
  height: auto;
  padding: 0;
  border-radius: 5px;
  text-align: center;
  font-size: 0;
}

.keys {
  overflow: hidden;
}

.keys span {
  /*float: left;*/
  vertical-align: top;
  display: inline-block;
  position: relative;
  top: 0;
  background: #FFFF00;
  font-size: 24px;
  cursor: pointer;
  width: 64px;
  height: 42px;
  border-radius: 5px;
  box-shadow: 0px 4px rgba(206, 206, 0, 1);
  margin: 0 7px 11px 0;
  color: #000;
  line-height: 44px;
  text-align: center;
  user-select: none;
  outline: 0 solid;
  transition: all 0.2s ease;
}

.keys span:hover {
  background: #fff;
  color: #000;
}

.keys span:active {
  box-shadow: 0px 0px #6b54d3;
  top: 4px;
}

<div id="calculator">
  <div class="keys">
    <span>Q</span>
    <span>W</span>
    <span>E</span>
    <span>R</span>
    <span>T</span>
    <span>Y</span>
    <span>U</span>
    <span>I</span>
    <span>O</span>
    <span>P</span>
    <div style="clear: both"></div>
    <span>A</span>
    <span>S</span>
    <span>D</span>
    <span>F</span>
    <span>G</span>
    <span>H</span>
    <span>J</span>
    <span>K</span>
    <span>L</span>
    <div style="clear: both"></div>
    <span>Z</span>
    <span>X</span>
    <span>C</span>
    <span>V</span>
    <span>B</span>
    <span>N</span>
    <span>M</span>
    <span>Ç</span>
    <div style="clear: both"></div>
    <span style="width: 350px"> </span>
    <span><<</span>
  </div>
</div>