Question

我无法将CSS5搜索栏置于CSS3中心

我正在尝试创建一个自动适应运行它的设备的页面。首先，我真的不知道我是否使用了正确的单位（我只使用％和em）。其次，我想创建一个页面，就像我会做一块砖墙：我制作我的砖然后放置它们（它转换为制作HTML块并将它们归于类，以便即使我放置搜索栏或单个元素在页面另一侧的菜单看起来仍然看起来完全一样，为此我需要做更多的课程，除了在CSS。文件中已经设置了主体。第三，我想避免使用JavaScript。

作为HTML的初学者。和CSS。我一直在互联网上搜索，但却没有找到正确的答案。尽管有时为遇到完全相同问题的人工作，但我尝试过的所有事情都失败了。我还尝试了几种网络浏览器（Chrome，Chrome Canary模拟Nexus 4和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的中心（我试过显示：块和东西，但它不起作用）但是当我在Chrome Canary的Nexus 4仿真上打开页面时，页面完全混乱。

现在让我紧张不安。我找到的大多数解决方案直接为人们工作但不适合我。我只是不知道该怎么做，我几乎肯定我做错了什么。我知道我做错了什么。我虽然HTML和CSS。会比JavaScript（我真的很喜欢）简单得多，但最终却完全相反;那些语言现在正在一小时之内成为我的屁股中的痛苦。

所以，如果有任何善良的灵魂愿意帮助我，我将非常感激。感谢。

Answer 1

如果你保持基于％的宽度，你可以设置一个10％左边距（100％ - 80％= 20％，左边距和右边距除以2 = 10％）。

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

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

Answer 2

你给.searchBar宽度为80％，这是文档的80％，就像它所在的div一样; .search给出了宽度。你想要做的是改变.search的宽度，因为它现在无限宽。您还应该给.search以下CSS：

margin-left:auto;
margin-right:auto;

这基本上可以根据需要将其带到中心。

新CSS：

.search
    {
    margin-left:auto;
    margin-right:auto;
    width:80%;
    }

.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
    {

    }

JSFiddle demo

您可能希望将其更改为：{/ p>，而不是在.searchBar中使用80％的宽度

width: -webkit-calc(100% - 30px);
width: calc(100% - 30px);

其中30px必须更改为.searchButton的宽度（您可能想要的+边距），因此它们都适合.search。

不可能以CSS3为中心

2 个答案: