如何将徽标图像和搜索字段（如Google页面）居中？ （引导程序）

Question

I'm having a hard time styling this. I just want my logo and search bar to be centered, with a bit more space above and below to fill the page. (This is at NE1UP dot com)

It's just a Google-esque page, that's all I want it to be, but I'm having a hard time getting this logo and search bar to align and display right, essentially like the Google page. I'm not sure if that's even the best option visually, but it's all I can visualize right now and just want to figure out what I'm doing wrong.

Thanks for ANY help!

This is the code from 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"/>

SEARCH

And the code from main.css:

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

.span8 button {margin-left:4.8%}

Answer 1

I don't know the bootstrap way but if you stick to traditional CSS, you can use position: absolute; for this

.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

You can add following styles to your css:

.span12 {text-align: center;}

.span12 img {margin: 20px 0;}

Fiddle

Answer 3

If the element you want to center has display:inline applied to it, then you can use margin centering. Apply this this to the element you want to center:

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

This assumes the that parent of this element has enough space for the child to center. The parent would need to be set to display:block; and/or have width:100% or something similar to ensure there is space for centering the child.

It would be helpful to have something on JSfiddle or Codepen to work with.