Question

我希望在<div>的中心放置一个按钮。我希望这个按钮放在两种颜色的中间。我截图了一张我希望如何看的图片，但我似乎无法弄清楚如何去做。

这是我的HTML代码：

<div id="enter">
         <div class="row">
            <div class="col-lg-12" id="dcPicture">
                <h1 id="welcome" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, repeat:true}">
                    WELCOME TO DURACOM
                </h1>
            </div>
        <div class="wrap">
            <div class="fleft" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
                <h1 id="residential">Residential</h1>
                <img class="home" src="home.png" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay: 500}">
            </div>
        <div class="fright" data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
                <h1 id="commercial">Commercial</h1>
                <img class="biz" src="commercial.png" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay: 500}">
          </div> 
       </div>

这是我的CSS：

.wrap {
width: 100%;
overflow:auto;
padding-bottom: 50px;
}

.fleft {
    float:left; 
    width: 50%;
background: #012a6a;
    height: 600px;
}
#residential {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-size: 48px;
   font-weight: 100;
   color: white;
   text-align: center;
   padding-top: 10%;
}
.fright {
float: right;
    background: #117bc2;
    height: 600px;
    width: 50%;
}
#commercial {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 48px;
    font-weight: 100;
    color: white;
    text-align: center;
    padding-top: 10%;
}
img.home {
    display: block;
    margin-left: auto;
    margin-right: auto
}
img.biz {
    display: block;
    margin-left: auto;
    margin-right: auto;

}

Answer 1

上面的代码有两张图片，你不会说哪个应该在中心，但看看这个小提琴：https://jsfiddle.net/pfeoda25/使用

position:relative

达到效果。

Answer 2

以下是如何做到这一点：

https://jsfiddle.net/6eq3v3LL/

这是我添加的CSS：

.wrap {
  position: relative;
}

.button {
  position: absolute;
  left: 50%;
  bottom: 80px;
  color: #fff;
  border: 2px solid #fff;
  padding: 5px 30px;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

我只是将带有边框的按钮设置为演示样式...但是根据需要改变。

Answer 3

给.wrap相对位置：

.wrap{
   position: relative;
}

然后在.wrap中创建按钮：

<div class="wrap">
   <div class="fleft"></div>
   <div class="fright"></div>
   <button>balh balh</button>
</div>

之后，将此样式添加到按钮：

button{
   bottom: 50px;
   left: 50%;
}

做自己的其他风格，如宽度，不透明度......

将按钮放在div的中心

3 个答案: