我是CSS等的新手。
我试图将2个按钮彼此并排排列在背景图像的中心,因此即使在调整窗口大小时它也保持在原位。
代码:
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
<div class="container">
<button class="button button1"><a href="/nl">Lang1</a></button>
<button class="button button2"><a href="/fr">Lang2</a></button>
</div>
答案 0 :(得分:0)
因此,也许您可以尝试:
.container{
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
或者您有没有看到关于flexbox的东西?由于您希望它具有响应性,因此我认为这可能是最好的替代方法。
.container {
display: flex;
align-items: center;
justify-content: space-around;
}
答案 1 :(得分:0)
为什么要创建两个具有相同属性的类?首先,您可以从以下类中删除属性:button1和button2,然后将这些属性添加到按钮类中,如下所示:
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
/* properties from class button1 or button2 */
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
然后在button1和button2类中添加以下代码以将其居中:
.button1 {
transform: translate(-50%, -50%);
position: absolute;
left: 40%;
top: 50%;
}
.button2 {
transform: translate(-50%, -50%);
position: absolute;
left: 60%;
top: 50%;
}
不要更改HTML代码,类是相同的。
答案 2 :(得分:0)
添加此CSS代码并根据需要更改顶部和左侧的值;
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
编辑HTML代码如下:
<div class="btncenter">
<button class="button button1"><a href="/nl">Lang1</a></button>
<button class="button button2"><a href="/fr">Lang2</a></button>
</div>
您可以在最终代码示例下面查看;
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
<div class="container">
<div class="btncenter">
<button class="button button1"><a href="/nl">Lang1</a></button>
<button class="button button2"><a href="/fr">Lang2</a></button>
</div>
</div>
答案 3 :(得分:0)
我更喜欢在每个屏幕宽度上使用@media查询。
使用position : absolute;
并根据需要播放top
或left
值:D
答案 4 :(得分:-1)
有多种方法可以做到这一点。下面的代码将使按钮彼此分开,直到没有剩余空间为止。这应该给您一个开始。
如果需要更固定的解决方案,也可以使用position: fixed
。但我建议您使用flex
属性。它应该可以解决大多数用例。
.btn-container {
display: flex;
align-items: center;
justify-content: space-around;
}
button {
background: pink;
color: #fff;
padding: 20px 40px;
}
<div class="btn-container"> <button class="first">Button 1</button><button class="second">Button 1</button></div>