如何將徽標圖像和搜索字段（如Google頁面）居中？ （引導程序）

Question

我在設計此樣式時很難。 我只希望徽標和搜索欄居中，在上方和下方留出更多空間來填充頁面。 （這是在NE1UP點com上）

這只是一個Google風格的頁面，這就是我想要的，但是我很難讓這個徽標和搜索欄對齊並正確顯示，就像Google頁面一樣。 我不確定這在視覺上是否是最好的選擇，但這就是我現在可以想象的，只是想弄清楚我在做什么錯。

謝謝你的幫助！

這是來自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"> 

<input id="name" style="width:90%;height:50px;margin-top:0px" type="text" name="q" class="input-xxlarge" id="q" placeholder="Enter Search Term Here"/>

搜索

以及來自main.css的代碼：

.span8 input {display: block; margin-left: auto; margin-right: auto;}

.span8按鈕{margin-left：4.8％}

Answer 1

我不知道引導方式，但是如果您堅持使用傳統CSS，則可以使用position: absolute; 為了這

.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 */

}

Answer 2

您可以在CSS中添加以下樣式：

.span12 {text-align: center;}

.span12 img {margin: 20px 0;}

小提琴

Answer 3

如果要居中的元素已應用display：inline，則可以使用邊距居中。 將此應用到要居中的元素：

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

假定該元素的父級有足夠的空間讓子級居中。 父項需要設置為display：block; 和/或寬度：100％或類似值，以確保有足夠的空間將孩子居中。

在JSfiddle或Codepen上使用某些東西會很有幫助。