Question

我希望将电子邮件地址（我有一定宽度）的输入表单和一个提交按钮（其宽度取决于语言和字体大小）水平居中，它们之间的间距约为10px。

然而，我尝试过的任何东西似乎都没有用，我真的很绝望。

非常感谢所有帮助！

Answer 1

将text-align: center添加到包含元素。

请参阅： http://jsfiddle.net/thirtydot/fvXGZ/

fieldset {
    text-align: center;
}

<form>
    <fieldset>
        <input />
        <input type="submit" />
    </fieldset>
</form>

Answer 2

有很多方法可以做到这一点，但要在多个浏览器中可靠地工作，可能取决于周围元素的布局。但是，这样的事情可能适合你：

<!DOCTYPE html>
<html>
<head>
    <title>Center</title>
    <style type="text/css">
        .outer {
            text-align: center;
        }

        .inner {
            margin-left: auto;
            margin-right: auto;
        }

        #emailaddr {
            width:100px;
            margin-right:10px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <input id="emailaddr" name="emailaddr" type="text" />
            <button name="submit" value="submit" type="submit">Submit</button>
        </div>
    </div>
</body>
</html>

Answer 3

要实现这一点，您只需确保表单元素周围的容器本身居中或具有“text-align：center”，以便将它们置于自身内部。

例如，以下内容符合您的描述：

<div style="text-align:center;border:1px solid blue;">    
  <form>
    <label for="email">Email:</label>
    <input type="text" name="email" style="width: 180px; margin: 0 10px 0 5px;">
    <input type="submit" value="Submit">
  </form>
</div>

默认情况下，div将填充100％的宽度。但是，如果您希望容器div本身浮动居中，请使用：

<div style="text-align:center;border:1px solid blue; margin: 0 auto;">

“保证金：0自动;”将左右边距设置为自动，这将使div在布局中居中浮动。

如何将具有已知宽度的对象和宽度未知的对象水平放置在一起？

3 个答案: