如何在中间放置按钮HTML& CSS [英] How to place button in the middle HTML & CSS
问题描述
所以我在此之前发布了一个很简单的问题，我设法快速解决了，但这是另一个问题。我在我的代码中添加了一个按钮，我想让它变得透明，但是它在顶部形成了一个巨大的空隙，我想把按钮放在中间，但我真的不知道怎么做。
以下是一些图片示例
https：// i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg [ ^ ]
https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg [ ^ ]
正如你在这张照片中所看到的，我将背景颜色改为透明
为什么它会在顶部产生巨大的差距？按钮仍然存在，但由于它的白色背景，我无法看到它，我想将按钮向下移动到中间
So I posted a question before this which was quite simple and I managed to solve it quick, but here is another issue. I added a button to my code, I wanted to make it transparent but then it made a huge gap at the top and I want the button to eb placed in the middle but I really have no idea on how to do it.
Here are some image examples
https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg[^]
https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg[^]
as you can see in this picture I changed the background color to transparent
why is it making that huge gap at the top? The button is still there but since its a white background I cant see it and I would like to move the button down to the middle
button {
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
overflow: hidden;
outline:none;
height: 38px;
line-height: 40px;
border: 2px solid white;
display: inline-block;
float: none;
text-align: center;
width: 120px;
padding: 0px!important;
font-size: 14px;
color: #fff;
}
button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
/*Menu CSS*/
#sidebar {
background: #151718;
width: 200px;
height: 17%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
z-index: 1000;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin: 20px;
position: absolute;
top:0px;
right:-60px;
}
#sidebar-btn span {
height: 1px;
background:#ffffff;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
/*Menu CSS*/
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="servicesPage.html">Services</a></li>
<li><a href="aboutPage.html">About</a></li>
<li><a href="aboutPage.html">Contact</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Buttons for email subscriptions and stuff -->
<!-- Full Width Responsive Slider -->
<div class="container">
<div style="background-color: transparent; text-align: center; padding: 10px"><button>Contact Us</button></div>
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/wp5.jpg">
<img src="images/wp6.jpg">
<img src="images/wp7.jpg">
</div>
<!-- Full Width Responsive Slider -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
我的尝试：
我尝试将代码移动到不同的地方并更改颜色
What I have tried:
I've tried moving the code to different places and changing the colors
推荐答案
（ document ）。ready（ function （）{
(document).ready(function(){
（ ' ＃sidebar-btn'）。click（ function （）{
('#sidebar-btn').click(function(){
（' ＃sidebar' ）.toggleClass（' visible'）;
}）;
}）;
< / script >
< / body >
('#sidebar').toggleClass('visible'); }); }); </script> </body>
我的尝试：
我尝试将代码移到不同的地方并更改颜色
What I have tried:
I've tried moving the code to different places and changing the colors
这篇关于如何在中间放置按钮HTML& CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![https：// i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg](\"https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg\"){kind=link}
![https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg](\"https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg\"){kind=link}