Q

如何将动态宽度按钮置于固定宽度div内？

2012-05-03 91 views 1 likes

1

我具有提交按钮或根据它们的值固定包裹内的div变化的宽度的正常的按钮。现在的按钮甚至不会有因为缺少width财产margin: 0 auto;和display:block;后的股利内线中锋。如何在没有明确设置每个按钮的宽度的情况下让它们居中？如何将动态宽度按钮置于固定宽度div内？

input[type="submit"], .button { 
     border: none; 
     outline: none; 
     -moz-border-radius: 10px; 
     -webkit-border-radius: 10px; 
     border-radius: 10px; 
     color: white; 
     display: block; 
     cursor: pointer; 
     margin: 0 auto !important; 
     clear: both; 
     padding: 5px 7px; 
     text-shadow: 0 1px 1px #777; 
     font-weight: bold; 
     font-family: "Century Gothic", Helvetica, sans-serif; 
     font-size: 14px; 
     -moz-box-shadow: 0px 0px 3px #aaa; 
     -webkit-box-shadow: 0px 0px 3px #aaa; 
     box-shadow: 0px 0px 3px #aaa; 
     background: #4797ED; 
}

2012-05-03 Vivek

A

回答

1

按钮是内联元素。由于其他原因所必需的display:block或根本反抗不了一般居中DIV中的所有文本/内联元素说话？

如果没有，你可以分配text-align:center到div来代替，而从按键上移开display:block。

作为一个侧面说明，当前的风格中心，FF12的按钮。你使用的是什么浏览器？编辑：也适用于IE9（jsfiddle）。

2012-05-03 13:42:42 Armatus

+0

谢谢您的回答。但是我不能将'text-align：center'分配给我的div，因为我将其他文本也包裹在同一个div中。有什么办法通过调整按钮的css中心按钮？ – Vivek

+0

@Vivek你可能需要在按钮上设置一个宽度，或者用'text-align：center;'在按钮周围添加一个额外的包装元素。 –

1

将input[type="submit"], .button {} 设置为display: inline-block;。然后div设置父text-align: center;。

2012-05-03 13:45:48

0

http://jsfiddle.net/gSaBj/1/

退房这个网址....

2012-05-03 13:50:03

+0

您已将'width'和'height'添加到按钮的css中。但在这里，我无法为按钮设置固定的“宽度”和“高度”。我已经删除了宽度和高度属性，并将按钮封装在div中，结果是这个“http：// jsfiddle.net/gSaBj/1 /'该按钮不居中。 – Vivek

+0

@vivek：你想要提交按钮Container的中心水平和垂直两个权利？ –

+0

只是水平居中按钮会为我做。 – Vivek

相关问题