Как выровнять 3 div'а относительно внешнего?

Рейтинг: 0Ответов: 2Опубликовано: 28.04.2015

Как выровнять по центру 3 div'а: #stack-wrapper, #lshelf-wrapper и #rshelf-wrapper относительно div'а #canvases ?

#canvases {
  display: table;
  width: 500px;
  height: 310px;
  margin: 0 auto;
  border: 1px dashed red;
}
#lshelf-wrapper,
#rshelf-wrapper {
  display: inline-block;
  width: 150px;
  height: 40px;
  border: 1px dashed gray;
  float: left;
}
#stack-wrapper {
  display: inline-block;
  width: 50px;
  border: 1px dashed gray;
  margin: 0 10px;
  float: left;
}
<div id="canvases">
  <div id="lshelf-wrapper">
    <canvas id="lshelf" width="150" height="40"></canvas>
  </div>
  <div id="stack-wrapper">
    <canvas id="stack" width="50" height="300"></canvas>
  </div>
  <div id="rshelf-wrapper">
    <canvas id="rshelf" width="150" height="40"></canvas>
  </div>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Можно заюзать display: flex; для #canvases и применить свойство justify-content: space-around;:

#canvases {
  display: flex;
  justify-content: space-around;
  width: 500px;
  height: 310px;
  margin: 0 auto;
  border: 1px dashed red;
}
#lshelf-wrapper,
#rshelf-wrapper {
  display: inline-block;
  width: 150px;
  height: 40px;
  border: 1px dashed gray;
  float: left;
}
#stack-wrapper {
  display: inline-block;
  width: 50px;
  border: 1px dashed gray;
  margin: 0 10px;
  float: left;
}
<div id="canvases">
  <div id="lshelf-wrapper">
    <canvas id="lshelf" width="150" height="40"></canvas>
  </div>
  <div id="stack-wrapper">
    <canvas id="stack" width="50" height="300"></canvas>
  </div>
  <div id="rshelf-wrapper">
    <canvas id="rshelf" width="150" height="40"></canvas>
  </div>
</div>

▲ 1

норм?

#canvases {
  display: table;
  width: 500px;
  height: 310px;
  margin: 0 auto;
  border: 1px dashed red;
}
#lshelf-wrapper,
#rshelf-wrapper {
  display: inline-block;
  width: 150px;
  height: 40px;
  border: 1px dashed gray;
  float: left;
}
#rshelf-wrapper{
  float:right
}

#stack-wrapper {
  display: inline-block;
  width: 50px;
  border: 1px dashed #808080;
  margin: 0 10px;
  float: left;
  margin-left: 14%;
}
<div id="canvases">
    <div id="rshelf-wrapper">
    <canvas id="rshelf" width="150" height="40"></canvas>
  </div>
  <div id="lshelf-wrapper">
    <canvas id="lshelf" width="150" height="40"></canvas>
  </div>
  <div id="stack-wrapper">
    <canvas id="stack" width="50" height="300"></canvas>
  </div>
</div>

Чем абсолютное позиционирование не устраивает, ну или таблица, если совсем никак

или вы имели ввиду нечно такое?

#canvases {
  width: 500px;
  height: 310px;
  margin: 0 auto;
  border: 1px dashed red;
}
#lshelf-wrapper,
#rshelf-wrapper {
  display: inline-block;
  width: 150px;
  height: 40px;
  border: 1px dashed gray;
  float: left;
}
#stack-wrapper {
  display: inline-block;
  width: 50px;
  border: 1px dashed gray;
  margin: 0 10px;
  float: left;
}
.fw {
  width: 380px;
  margin: auto;
}
<div id="canvases">
  <div class="fw">
    <div id="lshelf-wrapper">
      <canvas id="lshelf" width="150" height="40"></canvas>
    </div>
    <div id="stack-wrapper">
      <canvas id="stack" width="50" height="300"></canvas>
    </div>
    <div id="rshelf-wrapper">
      <canvas id="rshelf" width="150" height="40"></canvas>
    </div>
  </div>
</div>