中心組中的瀏覽器

按鈕的，我知道這很簡單，但我想不出它，因爲我不知道CSS。我嘗試了幾個谷歌選項，但它不會工作。我想要做的是在瀏覽器中心（垂直和水平）放置一對按鈕。我試着把這一對按鈕放在div標籤中，但是隨時隨地我都這樣做了，按鈕消失了。我的想法是將按鈕放在div標記中，並將該div放在屏幕中央。任何想法如何解決這個問題。來到這裏提琴：https://jsfiddle.net/um7ctpnj/1/中心組中的瀏覽器

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

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>

來源

2015-10-15 Emanuel

當你說中央的DIV，你的意思是水平和垂直方向？ – Lee

是的。垂直和水平@Lee – Emanuel

當你將按鈕換到DIV時，它們會消失，因爲你的CSS會這麼說'div {display：none; }'。 – hungerstar

當你在一個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>

我包你的DIV的是已申請display: none;他們在一類.numbered另一個DIV，並更新了CSS選擇器，使每一個DIV不display: none;和你申請到的DIV所有其他屬性。如果你需要更多的DIV添加到頁面可能會有所幫助。

來源

2015-10-15 13:55:45 hungerstar

-1

我不知道爲什麼放在當一個div因爲我不熟悉的jQuery按鈕消失，但你可以使用：

body{ 
    text-align:center; 
}

來源

2015-10-15 13:53:37 Benneb10

快速查看CSS會解釋完全放在一個div中時它們會消失，因爲海報有一個全局CSS規則來顯示所有div的「display：none」 – Lee

對於不顯示DIV的問題，jQuery不是問題。請參閱OPs'div' CSS選擇器。 – hungerstar

這個問題並沒有要求回答爲什麼把按鈕隱藏在按鈕周圍，我也沒有。我不會改變div如何顯示在CSS中，因爲我不想要亂搞她的功能不知道jQuery。我可以很容易地建議她給隱藏的div添加一個類，並隱藏它，而不是每個div，然後用一個邊距爲margin的邊距來包圍按鈕：0 auto，但是我提供了我知道的最簡單的解決方案，將所有文本集中在主體中。你打算投我一票回答這個問題？ – Benneb10

你可以這樣做：

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

來源

2015-10-15 13:54:02

代替在一個div包裹的按鈕，使用另一個元件（如<section>）

然後：

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

來源

2015-10-15 13:54:51

你被設置的div到display:none;這就是爲什麼他們正在消失。將該CSS更改爲類，並將其應用於框。

然後應用新的CSS代碼進行垂直對齊，並確保設置了html和body的高度。

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

注：垂直對齊的代碼是從本教程中找到：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

來源

2015-10-15 13:57:32 Lee

中心組中的瀏覽器

回答

相關問題