Question

编辑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
居中对齐表单内的文字

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

Answer 1

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

http://cssdeck.com/labs/slpqdfct

form {
  display: table;
  margin: 0 auto;
}

是否可以在保持内容和演示文稿分离的同时使表单居中？

1 个答案: