CSS для размещения разделителей в середине экрана по центру и по краю экрана

#html #css

Вопрос:

Вот код:

 body {
  position: relative;
  font-size: 30px;
}

#middle {
  width: 420px;
  height: 500px;
  margin: 100px auto 0;
  border: solid;
}

#left {
  position: fixed;
  border-style: solid;
  border-color: red;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

#right {
  position: fixed;
  border-style: solid;
  border-color: blue;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

 <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html charset=utf-8" />
  <title>Centered divs</title>
</head>

<body>

  <div id="left">▢</div>

  <div id="middle"></div>

  <div id="right">▢</div>
</body>

</html>

Как должен быть изменен код CSS, чтобы два дива с идентификаторами left right были центрированы между div в середине и их соответствующими краями экрана? (До сих пор мне удавалось центрировать дивы вертикально и размещать их по обе стороны от центрального дива, но не центрировать их горизонтально в пространстве центрального дива и по краям экрана.)

Ответ №1:

поскольку средний div имеет фиксированную ширину, вы можете использовать некоторую математику:

 body {
  font-size: 30px;
}

#middle {
  width: 420px;
  height: 500px;
  margin: 100px auto 0;
  border: solid;
}

#left {
  position: fixed;
  border: solid red;
  top: 50%;
  transform: translate(-50%,-50%); /* updated this too */
  left: calc((100% - 420px)/4); /* half of (half the remaining space) */
}

#right {
  position: fixed;
  border: solid blue;
  top: 50%;
  transform: translate(50%,-50%);
  right: calc((100% - 420px)/4);
}

* {
  box-sizing:border-box;
}

 <div id="left">▢</div>
<div id="middle"></div>
<div id="right">▢</div>

1. Превосходно! Это работает безупречно! В идеале решение, которое могло бы работать без вычислений, было бы лучше, но, как я уже сказал, это работает абсолютно нормально.

Ответ №2:

лучший способ сделать это-использовать flexbox

 body {
  
  font-size: 30px;
}
#container{
display:flex;
justify-content:space-between;
align-items:center;
}
#middle {
  width: 420px;
  height: 500px;
  
  border: solid;
}

#left {
 
  border-style: solid;
  border-color: red;
  display:inline;
  
  
}

#right {
 
  border-style: solid;
  border-color: blue;
  display:inline;
  
}

 <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html charset=utf-8" />
  <title>Centered divs</title>
</head>

<body>
<div id='container'>

  <span id="left">▢</span>

  <div id="middle"></div>

  <div id="right">▢</div>
  </div>
</body>

</html>