Html 如何将我的徽标图像和搜索区域像谷歌页面一样居中？（引导）

我很难设计这个。我只希望我的标志和搜索栏居中，上面和下面有更多的空间来填充页面。（这是在NE1UP.com上）

这只是一个谷歌风格的页面，这就是我想要的，但我很难让这个徽标和搜索栏对齐并正确显示，基本上就像谷歌页面一样。我不确定这是否是视觉上最好的选择，但这是我现在所能想象的，我只是想找出我做错了什么

谢谢你的帮助

这是index.htm中的代码

<div class="row">

            <div class="span12">
            <img src="soos.png" width="208px" height="72px">
            <div class="span2">
            </div>
            <div class="span8">

               <form action="search.php" method="get"> 

---

.span8按钮{margin left:4.8%}

我不知道引导的方式，但是如果你坚持传统的CSS，你可以使用

位置：绝对用于此

.logo {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 300px;
   height: 100px;
   margin-top: -50px; /* Half of total height */
   margin-left: -150px; /* Half of total width */

}

您可以将以下样式添加到css中：

.span12 {text-align: center;}

.span12 img {margin: 20px 0;}

如果要居中的图元应用了display:inline，则可以使用边距居中。将此应用于要居中的图元：

div.centerthis {
    display:inline;
    margin-left:auto;
    margin-right:auto;
}

这假定该元素的父元素有足够的空间使子元素居中。父项需要设置为显示：block；和/或宽度：100%或类似，以确保有空间使孩子居中

在JSfiddle或Codepen上使用一些东西会很有帮助。
我认为这是您查询的解决方案。和
.span12 {text-align: center;}

.span12 img {margin: 20px 0;}

div.centerthis {
    display:inline;
    margin-left:auto;
    margin-right:auto;
}