如何将div圈成对齐html，css中的左，右，上，下按钮？

Question

我创造了circle div。这个div对齐4方向按钮。这该怎么做？我没有正确设置。如果使用margin-top，left，right，bottom未正确对齐。在我的代码下面。

https://jsfiddle.net/wncv4h0s/1/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class ='circleBase' id='rotateMode'>

<button id="left" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-left"></span></button>

 <button id="right" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-right"></span></button>

 <button id="up" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-up"></span></button>

<button id="down" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-down"></span></button>

</div>

#rotateMode{
  border-radius: 50%;
  width: 125px;
  height: 125px;
  background-color: gray;
  color:white;
  position:absolute;

}

#left{

}

#right{


}

#up{

}

#down{

}

Answer 1

<style>
    #rotateMode{
      border-radius: 50%;
      width: 125px;
      height: 125px;
      background-color: gray;
      color:white;
      position:absolute;
    }
    #left,
    #right,
    #up,
    #down { position:absolute; width:20px; height:20px; cursor:pointer;}

    #left,
    #right {
        top:50%;
        -webkit-transform:translateY(-50%);
        -moz-transform:translateY(-50%);
        transform:translateY(-50%);
    }
    #up,
    #down {
        left:50%;
        -webkit-transform:translateX(-50%);
        -moz-transform:translateX(-50%);
        transform:translateX(-50%);
    }

    #left {
        left:0;
    }

    #right{
        right:0;
    }

    #up{
        top:0;
    }
    #down{
        bottom:0;
    }
</style>
<div class ="circleBase" id="rotateMode">   
    <button id="left" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-left"></span></button>
    <button id="right" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-right"></span></button>
    <button id="up" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-up"></span></button>
    <button id="down" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-down"></span></button>
</div>

Answer 2

在箭头按钮中使用absolute位置。直接定位它们就像left按钮使用left:0px和top:50%。现在使用transform:translateY(-50%)垂直对齐按钮中心和圆心。

#rotateMode{
  border-radius: 50%;
  width: 125px;
  height: 125px;
  background-color: gray;
  color:white;
  position:relative;
 
}

#left{
	position:absolute;
  top:50%;
  left:0px;
  transform:translateY(-50%);
}

#right{
 position:absolute;
  top:50%;
  right:0px;
  transform:translateY(-50%);
}

#up{
	 position:absolute;
  top:0px;
  left:50%;
  transform:translateX(-50%);
}

#down{
	position:absolute;
  bottom:0px;
  left:50%;
  transform:translateX(-50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 

<div class ='circleBase' id='rotateMode'>

<button id="left" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-left"></span></button>

 <button id="right" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-right"></span></button>
 
 <button id="up" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-up"></span></button>
 
<button id="down" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-down"></span></button>

</div>

Answer 3

围绕上部.top制作一个包装纸，围绕左/右按钮.middle的一个包装纸和围绕下部.bottom的一个包装纸。在此之后使用flexbox在#rotateMode上将它们放在一个列中。之后，你可以再次使用包装盒顶部/中部/底部的flexbox和justify-content来放置/放下底部居中和左/右，两侧之间有空间。这是一个指南，flexbox如何工作：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这也是我的代码：https://codepen.io/STWebtastic/pen/VXEBNb

#rotateMode {
  border-radius: 50%;
  width: 125px;
  height: 125px;
  background-color: gray;
  color: white;
  position: absolute;
  /* USE FLEXBOX */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top,
.middle,
.bottom {
  display: flex;
  flex-direction: row;
}

.top,
.bottom {
  justify-content: center;
}

.middle {
  justify-content: space-between;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class='circleBase' id='rotateMode'>
  <div class="top">
    <button id="up" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-up"></span></button>
  </div>

  <div class="middle">
    <button id="left" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-left"></span></button>
    <button id="right" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-right"></span></button>
  </div>

  <div class="bottom">
    <button id="down" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-down"></span></button>
  </div>
</div>