Question

我正在构建一个简单的计算器应用程序。目前我正在尝试将结果栏中的文本移到左侧几个像素并将其垂直居中。我尝试过使用：

vertical-align:center;

但那不起作用，

CodePen：http://codepen.io/roryavant8/pen/JGmjYz

的CSS：

#calculator {
  margin: auto;
  left: 50%;
  display: block;
  width: 400px;
  height: 400px;
  background-color: black;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border-style: solid;
  border-color: lime;
  box-shadow: 5px 7px 5px 1px grey, inset 2px 2px 10px 0px grey;
}

#resultBar {
  width: 150px;
  background-color: lime;
  height: 30px;
  border-radius: 10px;
  box-shadow: inset 1px 0px 5px 1px white;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  text-align:right;

}

button {
  cursor: pointer;
  background: lime;
  width: 50px;
  height: 40px;
  margin: 3px;
}

.row {
  margin-left: 80px;
  width: 400px;
}

HTML：

<div id="calculator">
  <div id="resultBar">
  </div>
  <div class="row">
    <button id="AC" type="button" value="89">AC</button>
    <button type="button" value="90" id="CE">CE</button>
    <button type="button" value="%">%</button>
    <button type="button" value="/">/</button>
  </div>
  <!----Closing rowOne div-->
  <div class="row">
    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>
    <button type="button" value="*">*</button>
  </div>
  <div class="row">
    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>
    <button type="button" value="-">-</button>
  </div>
  <div class="row">
    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>
    <button type="button" value="+">+</button>
  </div>
  <div class="row">
    <button type="button" value=".">.</button>
    <button type="button" value="0">0</button>
    <button type="button" value="Ans">Ans</button>
    <button type="=" value="=">=</button>
  </div>
</div>
<!-----Closing Calculator div--->

Answer 1

放入#resultBar

padding-top:10px;
padding-right:5px;

我刚试过它，看起来很好

如何在div中移动文本？

1 个答案: