Question

我知道这很简单，但我无法理解，因为我不了解CSS。我尝试了一些谷歌选项，但它没有工作。我想要做的是在浏览器的中心放置一对按钮（垂直和水平）。我尝试将这对按钮放在div标签中，但是只要我这样做，按钮就会消失。我的想法是将按钮放在div标签中，并将div放在屏幕上。任何想法如何解决这个问题。这里有一个小提琴：https://jsfiddle.net/um7ctpnj/1/

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

不是将按钮包装在div中，而是使用另一个元素（如<section>）

然后：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

当你将它们包装在DIV中时，你的按钮消失的原因是你的CSS默认不显示DIV。

.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>

我将display: none;已应用{D}的DIV包装在另一个类.numbered的DIV中，并更新了CSS选择器，以便每个DIV都不是display: none;而是所有其他DIV您应用于DIV的属性。如果您需要在页面中添加更多DIV，可能会有所帮助。

Answer 3

你可以这样做：

<强> 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

Answer 4

您将div设置为display:none;，这就是他们消失的原因。将CSS更改为类，并将其应用于框。

然后应用新的CSS代码进行垂直对齐，并确保设置html和body的高度。

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

注意：在本教程中找到了垂直对齐代码：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 5

我不确定为什么按钮在放入div时会消失，因为我不熟悉jQuery，但你可以使用：

body{
    text-align:center;
}

浏览器中的按钮中心组

5 个答案: