Html 如何在响应图像的中央放置2个按钮
我一直在浏览各种与我的问题尺寸相似的帖子，但没有一个能满足我的需要：我需要在一个响应图像上放置两个按钮，我将使用它作为网站的登录页。到目前为止，我设法在一个图像上放置两个按钮，但当调整它的大小时，任何提示都将得到感谢 这是我的HTML：Html 如何在响应图像的中央放置2个按钮,html,css,twitter-bootstrap,responsive-design,Html,Css,Twitter Bootstrap,Responsive Design,我一直在浏览各种与我的问题尺寸相似的帖子，但没有一个能满足我的需要：我需要在一个响应图像上放置两个按钮，我将使用它作为网站的登录页。到目前为止，我设法在一个图像上放置两个按钮，但当调整它的大小时，任何提示都将得到感谢 这是我的HTML： 正文{ 背景图像：url（'../Images/Riverfront%20image.jpg'）； 背景重复：无重复； 背景尺寸：包含； 背景大小：100%； } p{ 颜色：橙色； } .img集装箱{ 高度：60px； 宽度：140px； 位置：绝对位置；
正文{
背景图像：url（'../Images/Riverfront%20image.jpg'）；
背景重复：无重复；
背景尺寸：包含；
背景大小：100%；
}
p{
颜色：橙色；
}
.img集装箱{
高度：60px；
宽度：140px；
位置：绝对位置；
余量：-100px0-190px；
左：52%；
最高：50%；
}
.img-container2{
高度：60px；
宽度：140px；
位置：绝对位置；
裕度：-100px0-20px；
左：50%；
最高：50%；
}
.btn1{
背景：rgba（3,105,78,0.7）；
字体系列：Arial；
颜色：#ffffff；
字体大小：20px；
宽度：140px；
高度：60px；
位置：绝对位置；
利润率：-50px0-60px；
左：62%；
最高：50%；
}
.btn{
背景：rgba（3,105,78,0.7）；
字体系列：Arial；
颜色：#ffffff；
字体大小：20px；
宽度：140px；
高度：60px；
位置：绝对位置；
利润率：-50px0-50px；
左：57%；
最高：50%；
}
.splash_头{
/*背景图像：url（'../Images/webLogo.png'）*/
宽度：100%；
高度：120px；
z指数：1；
背景重复：无重复；
背景尺寸：包含；
背景大小：20%；
背景颜色：黄色；
}使用位置属性执行此操作。 假设您调用了一个div，而另一个div是您需要放置在上，然后执行以下操作：
div1{ default properties}
div2{position:absolute;// or relative whatever you want
top:20px;// or required what you need
}
body {
background-image: url('../Images/Riverfront%20image.jpg');
background-repeat:no-repeat;
background-size:contain;
background-size:100%;
}
p {
color: orange;
}
.img-container {
display: table;
margin:auto;
}
.btn1{
background: rgba(3,105, 78, 0.7);
font-family: Arial;
color: #ffffff;
font-size: 20px;
width:140px;
height:60px;
}
.btn {
background: rgba(3,105, 78, 0.7);
font-family: Arial;
color: #ffffff;
font-size: 20px;
width:140px;
height:60px;
}
.btn-container {
display: inline-block;
float:left;
}
.splash_header
{
/* background-image: url('../Images/webLogo.png');*/
width: 100%;
height: 120px;
z-index: 1;
background-repeat:no-repeat;
background-size:contain;
background-size:20%;
background-color: yellow;
}
`<div class="container-fluid ">
<div class="row">
<div class="splash_header">
<div class="col-sm-6">
<img src="../Images/webLogo.png" alt="my website logo">
</div>
<div class="img-container col-sm-12">
<div class="col-sm-6 btn-container">
<input class="btn " type="button" value="Arabic" name="Button1" />
</div>
<div class="col-sm-6 btn-container">
<input class="btn1 " type="button" value="English" name="Button2" />
</div>
</div>
</div>
</div><!-- end splash_header -->
</div>`
`
`
检查这把小提琴这是我如何通过使用骨架css和内部css解决问题的
<!DOCTYPE HTML>
<html>
<head>
<style>
.lang-box
{
/*background: #FFFFEB none repeat scroll 0 0;*/
/* background-color: rgba(114, 107, 125, 0.6);
*/
background-color:rgba(0,73,26,0.36);
border: 1px solid #858585;
border-radius: 5px;
color: gray;
font-family:"Gill Sans";
font-weight:500;
/*cursor: pointer;
*/ display: inline-block;
font-size: x-large;
line-height: 1em;
padding: 10px;
text-decoration: none;
width:1500px;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
</head>
<body>
<div class="lang-box four columns offset-by-two">
<p style="text-align:center; margin-bottom:0"><input class="button button-primary" type="button" value="English"/></p></div>
<div class="lang-box four columns ">
<p style="text-align:center; margin-bottom:0"> <input class="button button-primary" type="button" value="Arabic"/></p></div>
</div>
</body>
</html>
朗格盒子
{
/*背景：#FFFFEB无重复滚动0*/
/*背景色：rgba（114、107、125、0.6）；
*/
背景色：rgba（0,73,26,0.36）；
边框：1px实心#8585；
边界半径：5px；
颜色：灰色；
字体系列：“Gill Sans”；
字号：500；
/*光标：指针；
*/显示：内联块；
字号：x大号；
线高：1米；
填充：10px；
文字装饰：无；
宽度：1500px；
}
background size:contain或背景大小：100%100%