Center group of buttons in browser

Question

I know this is simple, yet I can't figure it out because I don't know CSS. I tried a few google options but it won't work. What I want to do is put a pair of buttons in the center of the browser (vertically and horizontally). I tried putting the pair of buttons in a div tag but anytime i did that, the buttons disappeared. My idea was to put the buttons in a div tag and center that div on the screen. Any ideas how to work this out. Got a fiddle here: https://jsfiddle.net/um7ctpnj/1/

$(document).ready(function (){
 $('#show').click(function(){
  $( "div:hidden:first" ).fadeIn( "slow" );
 });
 $('#hide').click(function(){
  $( "div" ).fadeOut("fast");
 });
});

  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }

<!doctype html>


    <title>Button Show</title>

  <body>
   
<body>
   
    <button id="show" type="button" class="btn btn-primary">Click Me!</button> 
    <button id="hide" type="button" class="btn btn-primary">Hide Me Now!</button> 

    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>

    <script src="javascript.js"></script>  
  </body>
</html>

When you say center the div, do you mean horizontally and vertically? — Lee, Oct 15 '15 at 13:46
When you wrap the buttons in a DIV they disappear because your CSS says so `div { display: none; }`. — hungerstar, Oct 15 '15 at 13:52
Possible duplicate of [How to center an element horizontally and vertically](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Rob, Oct 15 '15 at 13:53

score 2 · Answer 1 · answered Oct 15 '15 at 13:54

Instead of wrapping the buttons in a div, use another element (like a <section>)

Then:

$(document).ready(function() {
  $('#show').click(function() {
    $("div:hidden:first").fadeIn("slow");
  });
  $('#hide').click(function() {
    $("div").fadeOut("fast");
  });
});

  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }
  section.buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="buttons">
  <button id="show" type="button" class="btn btn-primary">Click Me!</button>
  <button id="hide" type="button" class="btn btn-primary">Hide Me Now!</button>
</section>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

hungerstar · Accepted Answer · 2015-10-15T14:01:05.767

The reason your buttons disappear when you wrap them in a DIV is because your CSS says not to display DIVs by default.

.numbered > div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
}
.btn-holder {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: transform( -50%, -50% );
}

<div class="btn-holder">
    <button id="show" type="button" class="btn btn-primary">Click Me!</button> 
    <button id="hide" type="button" class="btn btn-primary">Hide Me Now!</button>
</div>

<div class="numbered">
    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>
</div>

I wrapped your DIVs that had display: none; applied to them in another DIV with a class of .numbered and updated the CSS selector so that every single DIV is not display: none; and all the other properties you applied to DIVs. Might be helpful if you need more DIVs added to the page.

score 0 · Answer 3 · answered Oct 15 '15 at 13:54

You can do this:

CSS

  div {
      margin: 3px;
      width: 80px;
      display: none;
      height: 80px;
      float: left;
  }
  #one {
      background: #f00;
  }
  #two {
      background: #0f0;
  }
  #three {
      background: #00f;
  }
  .groupbuttons {
      position: absolute;
      display: block;
      text-align:center;
      top: 50%;
      -webkit- transform: translateY(-50%);
      transform: translateY(-50%);
      width: 100%;
  }

HTML

<div class="groupbuttons">
    <button id="show" type="button" class="btn btn-primary">Click Me!</button>
    <button id="hide" type="button" class="btn btn-primary">Hide Me Now!</button>
</div>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

DEMO HERE

score 0 · Answer 4 · answered Oct 15 '15 at 13:57

You were setting divs to display:none; which is why they were disappearing. Change that CSS to a class, and apply it to the boxes.

Then apply the new CSS code to vertically align, and make sure the height of html and body are set.

https://jsfiddle.net/um7ctpnj/15/

Note: the vertical align code was found from this tutorial: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

score -1 · Answer 5 · answered Oct 15 '15 at 13:53

-1

I'm not sure why the buttons disappear when placed in a div because I'm not familiar with jQuery, but you can use:

body{
    text-align:center;
}

answered Oct 15 '15 at 13:53

Benneb10

1,419
1
8
13

2

A quick look at the CSS would explain exactly they disappear when placed in a div, as the poster has a global CSS rule to `display:none` for all `div`s – Lee Oct 15 '15 at 14:04
jQuery isn't the issue for the DIVs not displaying. See the OPs `div` CSS selector. – hungerstar Oct 15 '15 at 14:05
The question didn't ask for an answer as to why placing a div around the buttons hid them, and neither did I. I'm was not going to change how the divs were displayed in the css, because I didn't want to mess with her functionality not knowing jQuery. I could easily have suggested to her to add a class to the hidden divs and hide that instead of every div and then surround the buttons in a div with the margin of margin:0 auto, but instead I provided the simplest solution I knew, which would centering all the text in the body. You're going to down vote me for providing an answer to the question? – Benneb10 Oct 15 '15 at 14:11
Someone down voted you because your answer doesn't satisfy the question. Not because you made a suggestion that suggested jQuery might have something to do with the buttons disappearing when placed in a DIV. That suggestion was corrected via comments. – hungerstar Oct 15 '15 at 14:41

Center group of buttons in browser

5 Answers5