CODEWITHSUNDEEP
htmlcss
emi
emi

Reputation: 2950

Center group of buttons in browser

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>

Upvotes: 0

Views: 87

Answers (5)

hungerstar
hungerstar

Reputation: 21685

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.

Upvotes: 1

Lee
Lee

Reputation: 4323

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/

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115035

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>

Upvotes: 2

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

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

Upvotes: 0

Benneb10
Benneb10

Reputation: 1489

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;
}

Upvotes: -1

Related Questions