如何在html，css中将div圈起来对齐左，右，上，下按钮

Question

我创建circle div .此div 对齐 4 个方向按钮。怎么做？我没有正确设置。如果使用边距-上、左、右、下未正确对齐。在我的代码下面。

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将它们放置在列中。之后，您可以再次使用弹性框和包装器顶部/中间/底部的justify-content，将上下底部居中和左/右放置，两侧之间留出空间。以下是弹性框如何工作的指南：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>