Css technical questions, Calculator project

I’ve just started working on the Calc project, and I’m going all over the place at the moment.
Keep in mind that it is just the beginning and I’m still experimenting. Here is my pen: http://codepen.io/bencarp/pen/yMRyQg

  1. As for the screen I’m not sure how to center vertically the text.
  2. I started my button experiments with the Anchor elements, trying to space the elements using the tab char \t, \t was not recognized as tab space.
  3. I then tried to create ‘divs’ with specific width and height. They collapsed once I defined ‘display:inline’ why?

The button option seems to work well, and I’ll probably use that. I might change them to ‘Bootstrap buttons’ later on.
Thanks in advance!
@YankeeDK @Reggie01 @Cardboard @ksjazzguitar

Place your text inside of a container div. Then center that div to center your text vertically.


You can replace \t with &nbsp to create a space. Add as many &nbsp as needed for your code. Look under the sub-heading non-breaking space to read more about adding space w/html.

Use display inline-block.

An inline element does not start on a new line and only takes up as much width as necessary.

Just try to put your buttons in a <table> to organize them like a calc. in <div>

In your code, you use non-unique ids (id="cButton" ). An id must be unique.

You use bootstrap classes without linking to bootstrap.css (ex: class=“container-fluid” …).

  1. In order to center text vertically, you need to set the line-height property to be the same as the height of the element. Or, if you don’t wish to explicitly specify the height and let the element wrap its contents instead, try setting its top and bottom padding to the same value.

  2. The \t character isn’t valid in HTML. You shouldn’t use tabs to space elements though, but instead use margins. You could still use a tab in HTML, though you’ll have to Google that, I’ve never personally had to use it so I’m not sure how to use it.

  3. Inline-level elements can’t accept specific widths and heights (nor margin and padding, for that matter). Set them as inline-block instead. Check this page out if you wish to know why: http://learn.shayhowe.com/html-css/opening-the-box-model/.

Hope this helps!