Question

我有具体情况。我想垂直对齐一个元素（在这种情况下是按钮），位置：绝对，内部可调整大小的div，绝对定位，（试图获得液体布局）。

HTML：

<div id="container">

<div id="first-block-call" class="call-to-action">
<input name="continue" type="button" class="buttonb" value="CONTINUEZ">
</div>
    </div>

CSS：

#container {
width:100%;
    height:100px;
    position:relative;
}

.call-to-action {
    width:102.85%;

    max-height:120px;
    background-image:url('http://bybyweb.com/snail-secret/fluid/images/cures2-responsive.png');
    background-repeat:no-repeat;
    background-size:100%;
    position:absolute;
    left:-1.4%;
    bottom:-42px;




}
.call-to-action input.buttonb {

max-width:267px;
    max-height:120px;
width:202px;
height:47px;
min-width:202px;
min-height:47px;

right:2%;
top:29%;

    position:absolute;

    background-image:url('http://bybyweb.com/snail-secret/fluid/images/green-button.png');
    background-repeat:no-repeat;
    border:none;
    background-color:transparent;
    color:#e3e3e3;
    cursor:pointer;
    font-family:Arial, Helvetica, sans-serif;
    font-size:26px;
    font-weight:bold;
    line-height:42px;
    text-shadow: 0px 2px 2px rgba(150, 150, 145, 1);    
    display:block;
    background-size:100%;
    background-position:center;
    margin:0;



}

目前，css很乱，我也试图获得可调整大小的按钮，但没有成功，但现在我想垂直对齐它，至少...

小提琴：http://jsfiddle.net/c0jj5xya/

为了获得更清晰（更大）的图片，您可以转到：http://bybyweb.com/snail-secret/fluid/，并将屏幕大小从768px调整为989px，然后您可以获得整个上下文（也许我将需要制作额外的/新的html）。 ..

P.S。您会注意到完美的，50％对齐是不够的，在这种情况下，背景图像/布局是特定的...所以，还需要一些额外的数学，这意味着 - 欢迎使用javascript / jquery解决方案！但是我注意到我无法获得具有最大高度值设置的精确div高度...... :(

Answer 1

将height的{{1}}设置为.call-to-action，然后添加

47px

到position: absolute; top: 50%; transform: translateY(-50%);垂直对齐按钮。

请参阅here

集中在流体容器内

1 个答案: