Question

我正在尝试将搜索栏放在我的网页上。我目前使用以下代码将栏中心放在HTML中：

<div class="search" > 
   <form action="search" align="center">
  <input type = "text" name= "search" placeholder= "THIS DOESNT WORK..."/>
  <input type = "submit" value ="Search"/><a href="Browse.html" id="browse">Browse</a>
   </form>
</div>

但是，虽然样式是在HTML中，但我无法验证我的页面。

我的问题是我无法弄清楚如何将搜索栏集中在CSS中。

我一直在研究它，我的理解是这应该有效：

#search{
width:400;
margin-left: auto;
    margin-right: auto;

}

然而这不起作用。

我很陌生，如果这是非常基本的话，那就很抱歉。

Answer 1

由于此代码似乎在JSFiddle中工作，我的建议是您确定包含<div class='search'></div>的父元素足够宽以容纳400px居中元素。尝试将其父级宽度设置为100％并查看是否有效。

没有父母：http://jsfiddle.net/kj9AD

与父母：http://jsfiddle.net/kj9AD/1/

Answer 2

Class -> .

这是差异

ID    -> #

如果您的元素包含class="search"，则在CSS中使用.search{/* style here */}，但如果您的元素为id="search"，则在CSS中您必须使用#search{/* style here */} < / p>

在您的代码中，您有class="search"，而在CSS中，您有#search{}

所以，这将有效：

<div class="search" > 
   <form action="search">
  <input type = "text" name= "search" placeholder= "THIS DOESNT WORK..."/>
  <input type = "submit" value ="Search"/><a href="Browse.html" id="browse">Browse</a>
   </form>
</div>
<style>
    .search{
    width:400;
    margin-left: auto;
        margin-right: auto;
    }
</style>

http://www.w3schools.com/css/css_id_class.asp

Answer 3

你应该在表格

上放置100％的宽度.search和text align

http://jsfiddle.net/UTrSU/

.search{
width:100%;
}
form {text-align:center;}

如果你有一个div类，你应该输入“.name”，什么时候是div，你应该输入“#name”

HTML和CSS居中

3 个答案: