Question

我有一个mailchimp表单，我想对齐到页面底部的中心（从底部有10px填充）。

我设法把它弄到底部，但我不知道如何能够移动到中心。

.mc-field-group{
background-color: #174365;
opacity:0.8;
padding: 0px;
color: #fff;
font-family: Helvetica, Arial;
width:400px;
font-size:12px;
padding-left:10px; 
position: absolute; bottom: 0; left: 0;

}

#mce-EMAIL {
float: left;
margin:10px;  
font-size:12px;
background: transparent;
    }

#mce-FNAME{
margin:10px;
font-size:12px;
background: transparent;
}

#mc_embed_signup input {border:1px solid #fff; -webkit-appearance:none; color:#fff;     text-transform: uppercase; background: transparent; text-indent:2%; color}

#mc_embed_signup .button {clear:both; background-color: #174365; color: #FFFFFF; display: inline-block; font-size:14px;  margin: 11px 5px 5px 0; text-align: center; text-decoration: uppercase; width: auto; border:1px solid #fff; font-size:12px;}

任何人都知道如何让它坚持到页面底部（带一点填充）？

谢谢！：）

Answer 1

将right:0;，margin-left:auto;和margin-right:auto;添加到.mc-field-group

更改为：

.mc-field-group {
    background-color: #174365;
    opacity:0.8;
    padding: 0px;
    color: #fff;
    font-family: Helvetica, Arial;
    width:400px;
    font-size:12px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin-left:auto;
    margin-right:auto;
}

<强> JSFiddle Demo

<强> P.S：

使用text-align:center;将内容置于div内。

此外，margin-left和margin-right属性可以替换为：margin: 0 auto;

将形状水平对齐到底部中心

1 个答案: