如何水平居中DIV

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

问候，凯文

2012-05-21 www.data-blogger.com

您定位了哪些浏览器？ –

您的HTML有几个错误，从没有文档类型开始。先尝试清理，然后再进行定位。 – j08691

在第10行，你应该宽度添加到div：变化

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

到

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

编辑方式，您将不得不将输入元素的宽度更改为固定像素值，而不是width: 30%;

来源

2012-05-21 18:23:08

margin-left：auto;和margin-right：自动将剩余宽度减半，结果元素居中。这会让你更接近，但这不是一切。（不幸的是它并没有，虽然它是正确的改变外观哪怕是一点点。）

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

人们希望能够指定类似“width：minimum-needed;”的东西。所以它会自动调整，无论它包含什么......但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-21 18:53:27

试试这个。

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

来源

2012-05-23 11:09:05

如何水平居中DIV

回答

相关问题