1

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

问候，凯文

4

3 回答 3

1

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

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

至

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

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

于 2012-05-21T18:23:08.483 回答
1

尝试这个。

<center>
<input type="text" />
</center>
于 2012-05-23T11:09:05.313 回答
0

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

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

希望能够指定诸如“宽度：最小需要；”之类的东西。所以它会自动调整到它包含的任何内容......但CSS中没有这样的东西。我知道的唯一方法是以对您所知道的内容有意义的方式显式指定元素的宽度。

因此，例如，下面是您的代码已修改，因此看起来像我对您想要的东西的理解（此处可能有一个额外的 <div> ，您可能希望将此信息封装在样式表中……但是您明白了） ：

<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>
于 2012-05-21T18:53:27.910 回答