How do I center my logo image and search field like the Google page? (Bootstrap)

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

I think this has the solution for your query. http://stackoverflow.com/questions/9184141/how-do-you-get-centered-content-using-twitter-bootstrap?rq=1 and http://stackoverflow.com/questions/11573023/twitter-bootstrap-search-box-and-buttons-allignment-google-like?rq=1 — openrijal, Apr 19 '13 at 05:11

score -1 · Answer 1 · answered Apr 19 '13 at 05:11

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

}

score -1 · Answer 2 · answered Apr 19 '13 at 05:16

-1

You can add following styles to your css:

.span12 {text-align: center;}

.span12 img {margin: 20px 0;}

Fiddle

answered Apr 19 '13 at 05:16

Eli

14,779
5
59
77

Opaw Nako · Answer 3 · 2015-03-23T16:11:57.820

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.

How do I center my logo image and search field like the Google page? (Bootstrap)

3 Answers3