-1

I am building a simple calculator application. Currently I am trying to get the text inside the result bar to move the left a few pixels and center it vertically. I've tried using: 

vertical-align:center;

But that did not work,

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--->
RoryAvant
  • 49
  • 5
  • `padding-left:10px; text-align:center;` – something like that …? – CBroe Feb 06 '16 at 06:10
  • padding-left worked to get it off the edge, I'm trying to center vertically, not horizontally. – RoryAvant Feb 06 '16 at 06:14
  • Possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) – CBroe Feb 06 '16 at 06:15

1 Answers1

0

put in #resultBar

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

i have just tested it, look fine to me