Can't center an element inside div

Question

I have three elements inside a div. I want to position one on the left, one in the middle and the last one on the right. I have tried the following:

    .search-form {
        float: right; 
    }

 .menu_icon:before {
    content:url(/sites/all/themes/mytheme/images/hamburger.png);
}

.main_logo {
  margin: 0% auto;
}

.main_logo:before {
    content:url(/sites/all/themes/mytheme/images/logop.png);
}
    .menu_icon {
       float: left;
    }

    <div class="fixed"> 
     <div class="fixed-container">
      <a href="#menu" title="Menu" class="menu_icon"> </a>
       
      <form action="/search/node" method="post" id="search-form" class="search-form">
       <div class="form-item">
         <input type="text" class="input-text" value="Search the website" onFocus="this.value=''" onBlur="if(this.value=='') this.value='Search the website';" size="25" name="keys" />
         <input type="submit" value="" name="op" alt="Search" />
         <input type="hidden" value="<?php print drupal_get_token('search_form'); ?>" name="form_token" />
         <input type="hidden" value="search_form" id="edit-search-form" name="form_id" />
         <input type="hidden" name="type[your_content_type]" id="edit-type-your_content_type" value="your_content_type" />
       </div>
     </form>

     <a href="/" title="Home page" rel="home" class="main_logo"> </a>
     </div>
    </div>

Also I have tried to individually wrap those elements in divs and applying styles to those divs instead of elements. But the logo always sticks to the menu icon as it can be seen from the snippet below. Why it's not working?

Here's my answer to a similar question: http://stackoverflow.com/a/32122011/3597276 — Michael Benjamin, Aug 22 '15 at 17:53

score 4 · Accepted Answer · edited Aug 22 '15 at 18:07

Currently your a is displayed as inline, which makes it unable to be centered as a block.

Also, display:block does not work on its own with margin:0 auto, as blocks have an understood width of 100%. You also need a given width for it to work.

.first {
    float:right;background:red;
}
.second{
    float:left;background:blue;
}
.third{
    margin:0% auto;background:gold;
    display:block;width:10em;
    /*Unnecessary but may be added*/text-align:center;
}

<div class="fixed"> 
    <div class="fixed-container">
        <span class="first">First</span>
     <div class="second">Second</div>
     <span class="third">Third</span>
    </div>
</div>

Can't center an element inside div

1 Answers1