Question

如何使用此网址上的文本框和按钮将DIV水平居中：http://tinyurl.com/d4lpyh5？

此致凯文

Answer 1

在第10行，您应该为div添加一个宽度：变化

<div style="margin-left: auto; margin-right: auto;">

到

<div style="margin-left: auto; margin-right: auto;width: 700px;">

编辑：如果你这样做，你必须将输入元素的宽度更改为固定的像素值，而不是width: 30%;

Answer 2

试试这个。

<center>
<input type="text" />
</center>

Answer 3

margin-left：auto;和margin-right：自动将它们之间的剩余宽度分成两半，结果是元素居中。这让你更接近，但并不是一切。（不幸的是，即使它是正确的，它也不会改变外观。）

元素看起来居中的原因是元素默认为容器/屏幕的整个宽度。因此，要使水平居中工作，您不仅需要指定左右自动边距，还需要进一步明确设置元素的宽度。

人们希望能够指定诸如“width：minimum-needed;”之类的内容。所以它会自动调整到它包含的内容......但CSS中没有这样的东西。我知道的唯一方法是以一种对你所知道的内容有意义的方式明确指定元素的宽度。

所以下面的例子是你的代码被修改，所以它看起来像我对你想要的东西的理解（这里可能还有一个额外的＆lt; div＆gt;，你可能想把这些信息封装在你的样式表中......但是你得到这个想法）：

<html>
<head>
<title>Page</title>
<link rel="stylesheet" href="http://145.120.12.115/project/css/main.css"></link>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="top"></div>
<div class="search">
    <div style="margin-left: auto; margin-right: auto; width: 40ex;">
      <input type="text" id="q" name="q" value="" style="width: 30ex;"/>
      <input type="submit" class="blueButton button" value="Search" />
    </div>
</div>
</body>
</html>

如何水平居中DIV

3 个答案: