0

我很难设计这个。我只希望我的徽标和搜索栏居中，并在上方和下方留出更多空间来填充页面。（这是在 NE1UP dot 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"> 


<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%}

4

3 回答 3

-1

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

.span12 {text-align: center;}

.span12 img {margin: 20px 0;}

小提琴

于 2013-04-19T05:16:26.397 回答
-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 */

}
于 2013-04-19T05:11:39.357 回答
-1

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

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

这假设该元素的父元素有足够的空间让子元素居中。需要将父级设置为 display:block; 和/或有 width:100% 或类似的东西，以确保有空间让孩子居中。

在 JSfiddle 或 Codepen 上使用一些东西会很有帮助。

于 2015-03-23T16:03:30.930 回答