Выравнивание с помощью симметрии

Question

Есть код. Необходимо привести в порядок меню. Для этого создается 3 элемента .leftside, .rightside, .centerplace и .nestedblock. Они используются при разметке (.rigthside должен быть невидимым). .leftside, .rightside, .centerplace идут в одну строку в пункте меню li и выравниваются с помощью flex-а с опцией space-between.

<html>

<head>
  <style type="text/css">
    * {
      list-style: none;
      text-decoration: none;
      margin: 0;
      padding: 0;
    }
    
    ul {
      background: #afafaf;
      display: inline-block;
      width: 420px;
      border-right: 1px solid #000;
    }
    
    ul li {
      padding: 6px 0;
      background: #fff;
      display: inline-flex;
    }
    
    ul li:hover {
      background: lightgreen;
    }
    
    ul li a {
      color: #000;
    }
    
    ul li:hover a,
    ul li:hover .fa {
      color: #fff;
    }
    
    ul li .fa {
      margin-left: 16px;
      display: inline-block;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    .leftside {
      margin-left: 16px;
      display: inline-block;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rightside {
      margin-right: 16px;
      display: none;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .centerplace {
      width: 328px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .nestedblock {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  </style>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <ul>
    <li>
      <div class="leftside">
        <i class="fa fa-home"></i>
      </div>
      <div class="centerplace">
        <a href="" class="nestedblock">Техника для кухни</a>
      </div>
      <div class="rightside">
        <i class="fa fa-home"></i>
      </div>
    </li>
    <li>
      <i class="fa fa-star"></i>
      <a href="">Бытовая техника для дома</a>
    </li>
    <li>
      <i class="fa fa-youtube"></i>
      <a href="">Техника для прихожей и гостинной</a>
    </li>
    <li>
      <i class="fa fa-facebook"></i>
      <a href="">Телевизоры и аудиотехника</a>
    </li>
  </ul>
</body>

</html>

Каким образом можно добиться, чтобы иконка располагалась сбоку, а гиперссылка по центру с помощью flex-а? (вторая иконка справа делается невидимой, а рисунок и надпись становятся на нужные позиции)

Мне не ответили на Как вычислить ширину гиперссылки в пикселях?, привели код на js, а надо на html и css.

P.S. Это вопрос другой- в нем используются другие классы в стилях. Поэтому он не является дубликатом. Прошу вопрос не закрывать.

Answer 1

* {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

ul {
    background: #afafaf;
    display: inline-block;
    width: 420px;
    border-right: 1px solid #000;
}

ul li {
    width: 100%;
    padding: 6px 0;
    background: #fff;
    display: inline-flex;
    align-items: center;
}

ul li:hover {
    background: lightgreen;
}

ul li a {
    width: 100%;
    margin-left: 20px;
    margin-right: 10px;
    color: #000;
    display: inline-flex;
    align-items: center;
}

ul li:hover a,
ul li:hover .fa {
    color: #fff;
}

ul li .fa {
    margin-left: 16px;
    display: inline-block;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <ul>
      <li>
        <i class="fa fa-home"></i>
        <a href="">Техника для кухни</a>
      </li>
      <li>
        <i class="fa fa-star"></i>
        <a href="">Бытовая техника для дома</a>
      </li>
      <li>
        <i class="fa fa-youtube"></i>
        <a href="">Техника для прихожей и гостинной</a>
      </li>
      <li>
        <i class="fa fa-facebook"></i>
        <a href="">Телевизоры и аудиотехника</a>
      </li>
    </ul>
  </body>
</html>

БЛОГ НА HUSL

Выравнивание с помощью симметрии

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