1

为什么此输入按钮在 Chrome 中正确居中显示，但在 IE 或 Firefox 中显示在右侧。这是链接，它是右侧的第二个按钮：

网站：http ://dallaspetsalive.org/about/

HTML：

<div style="float:center;text-align:center;">
<form action="http://linkhidden" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email     address" required>
<br /><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"    class="button" style="text-align:center;float:center;" >
</form>
</div>

这是CSS：

input.button {
    background: -moz-linear-gradient(center top , #E8E8E8 0%, #D1D1D1 100%) repeat scroll 0 0 transparent;
    border: 1px solid #9D9D9D;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 1px 0 #F5F5F5 inset;
    color: #656464;
    display: inline-block;
    padding: 6px 12px;
    text-shadow: 1px 1px 0 white;
}
4

2 回答 2

1

该属性float: center不存在。更改内联样式并添加以下内容：

float: none;
margin: 0 auto;

您的输入标签应为

<input 
    type="submit" 
    value="Subscribe" 
    name="subscribe" 
    id="mc-embedded-subscribe"
    class="button" 
    style="float:none; margin: 0 auto;" 
/>
于 2013-04-24T02:26:52.130 回答
0

该按钮在 CSS 'input.button' 上有一个选择器，它具有 float:right。这是我用 firebug 找到的代码：

input.button {
    background: -moz-linear-gradient(center top , #E8E8E8 0%, #D1D1D1 100%) repeat scroll 0 0 transparent;
    border: 1px solid #9D9D9D;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 1px 0 #F5F5F5 inset;
    color: #656464;
    display: inline-block;
    float: right;
    padding: 6px 12px;
    text-shadow: 1px 1px 0 white;
}

如果你删除浮动，它以 Firefox 为中心，我猜 Chrome 和资源管理器也是如此。或在 HTML 中：

<div style="float:none; text-align:center;">
于 2013-04-24T02:21:27.883 回答