css - 无法使用 CSS3 居中

Question

我无法使用 CSS3 将 HTML5 搜索栏居中

我正在尝试制作一个自动适应运行它的设备的页面。首先，我真的不知道我是否为此使用了正确的单位(我只使用 % 和 em)。其次，我想制作一个页面，就像制作一堵砖墙一样:我制作我的砖 block 然后放置它们(转化为制作 H.T.M.L. block 并为它们分配类，这样即使我放置搜索栏或页面另一侧的菜单看起来仍然完全相同，为此我需要在主体设置完成后尽可能多地添加类，除了 CSS. 文件中)。第三，我想避免为此使用 JavaScript。

作为 HTML 的初学者。和CSS。我一直在互联网上搜索一天，但从未找到正确答案。尽管有时为遇到完全相同问题的人工作，但我尝试的一切都失败了。我还尝试了几种网络浏览器(Chrome、模拟 Nexus 4 的 Chrome Canary 和 Safari)，但都没有成功。

以下是我的代码中隐含的部分:

HTML5

    <div class="search">
        <form method="get" action="">
            <input type="search" name="search bar" placeholder="rechercher un spot" class="searchBar"/>
            <input type="image" src="image.png" value="search" class="searchButton"/>
        </form>
    </div>
    <!--search-->

CSS3

 .search
{
    ;
}

.searchBar
{
    color: rgb(0,0,0);
    font-size: 1em;
    font-family: Arial, sans-serif;
    font-variant: normal;
    font-style: normal;
    font-weight: normal;
    width: 80%;
    padding: 1em;
    border-style: none;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
}

.searchButton
{
    ;
}

我多次尝试放置 margin-left: auto 和 margin-right:auto 。事实上，我几乎尝试了在 Stackoverflow 和 w3schools 上找到的所有内容，但没有任何效果，搜索栏仍然出现 老实说，我确实用 display: table 将搜索栏居中(我尝试了 display: block 和其他东西，但它没有用)但是当我在 Chrome Canary 的 Nexus 4 仿真上打开页面时完全是一团糟。

这真的让我很紧张。我发现的大多数解决方案直接对人们有用，但对我不起作用。我只是不知道该怎么办，我几乎可以肯定我做错了什么。我知道我做错了什么。 我虽然 HTML 和 CSS。会比 JavaScript(我真的很喜欢)简单得多，但最终却完全相反；现在，这些语言越来越让我心烦意乱。

所以，如果有好心人愿意帮我一把，我将不胜感激。谢谢。

Answer 1

如果您要保持基于 % 的宽度，则只需将 margin-left 设置为 10%(100% - 80% = 20%，左右边距除以 2 = 10%)。

width: 80%;
margin-left: 10%;

这是一个 JSFiddle:http://jsfiddle.net/9uG8m/