1

编辑 5/21/13 13:40 EST：添加inline-block样式。

考虑以下页面：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            form { display: inline-block; }
        </style>
        <title>Log in </title>
    </head>
    <body>
        <form action="/login" method="post">
            <label for="username">Username: </label><input type="text" name="username" id="username">
            <label for="password">Password: </label><input type="password" name="password" id="password">
            <input type="submit" value="Log in">
        </form>
    </body>
</html>

CSS中有什么方法可以使表单居中而不

  • 通过引导网格添加额外的 div
  • 猜测表单的宽度将以百分比或 px 为单位
  • 居中对齐表单内的文本

基本上，我希望包含表单的块的宽度由其内容自动确定，然后将该块的中心与页面的中心对齐。

4

1 回答 1

1

你要找的是display: table，不是display: inline-block。两种显示类型都有缩小以适应您正在寻找的行为，但table允许您使用边距来居中。

http://cssdeck.com/labs/slpqdfct

form {
  display: table;
  margin: 0 auto;
}
于 2013-05-21T17:44:31.037 回答