Как выровнять весь тексть по центру?

Question

.calculator{
   width: 500px;
   background: #F08080;
   border: 1px solid black;  
   position: relative;
   text-align: center;
   font-size: 50px;
}

.input{
    height: 50px;
    background: skyblue;
    margin: 5px;
}

.operators{
    display: flex;
}


.operators1{
    height: 50px;
    flex: 25%;
    background: skyblue;
    margin:5px;
    
    
}

.leftPanel {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 240px;
}

.numbers{
display: flex;
flex-grow: 1;
width: 75%;
}
.number1{
    height: 50px;
    margin: 5px;
    background: skyblue;
    flex:25%;
    
    
}
.equal{
    background: skyblue;
    height: 240px;
    margin: 5px;
    width: calc(25% - 10px);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet" href="calc.css" />
    <script src="calc.js"></script>
</head>

<body>
   <div class="calculator">
  <div class="input" id="input"></div>
  <div class="buttons">
    <div class="operators">
      <div class="operators1">+</div>
      <div class="operators1">-</div>
      <div class="operators1">&times;</div>
      <div class="operators1">&divide;</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div class="number1">7</div>
        <div class="number1">8</div>
        <div class="number1">9</div>
      </div>
      <div class="numbers">
        <div class="number1">4</div>
        <div class="number1">5</div>
        <div class="number1">6</div>
      </div>
      <div class="numbers">
        <div class="number1">1</div>
        <div class="number1">2</div>
        <div class="number1">3</div>
      </div>
      <div class="numbers">
        <div class="number1">0</div>
        <div class="number1">.</div>
        <div class="number1" id="clear">C</div>
      </div>
      <div class="equal" id="result">=</div>
    </div>
  </div>
</div>
</body>

</html>

Answer 1

.calculator{
   width: 500px;
   background: #F08080;
   border: 1px solid black;  
   position: relative;
   text-align: center;
   font-size: 50px;
}

.input{
    height: 50px;
    background: skyblue;
    margin: 5px;
}

.operators{
    display: flex;
}


.operators1{
    height: 50px;
    flex: 25%;
    background: skyblue;
    margin:5px;
    
    
}

.leftPanel {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 240px;
}

.numbers{
display: flex;
flex-grow: 1;
width: 75%;
}
.number1{
    height: 50px;
    margin: 5px;
    background: skyblue;
    flex:25%;
    
    
}
.equal{
    background: skyblue;
    height: 240px;
    margin: 5px;
    width: calc(25% - 10px);
}

/* выравнивает по центру */
.operators1, .number1, .equal {
  display: flex; /* Обязательно, иначе свойства ниже не работают, если нужно сделать flex как block, то можно использовать свойство "flex-direction: column;" */
  align-items: center;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet" href="calc.css" />
    <script src="calc.js"></script>
</head>

<body>
   <div class="calculator">
  <div class="input" id="input"></div>
  <div class="buttons">
    <div class="operators">
      <div class="operators1">+</div>
      <div class="operators1">-</div>
      <div class="operators1">&times;</div>
      <div class="operators1">&divide;</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div class="number1">7</div>
        <div class="number1">8</div>
        <div class="number1">9</div>
      </div>
      <div class="numbers">
        <div class="number1">4</div>
        <div class="number1">5</div>
        <div class="number1">6</div>
      </div>
      <div class="numbers">
        <div class="number1">1</div>
        <div class="number1">2</div>
        <div class="number1">3</div>
      </div>
      <div class="numbers">
        <div class="number1">0</div>
        <div class="number1">.</div>
        <div class="number1" id="clear">C</div>
      </div>
      <div class="equal" id="result">=</div>
    </div>
  </div>
</div>
</body>

</html>

БЛОГ НА HUSL

Как выровнять весь тексть по центру?

Ответы (1 шт):