无法将div中的元素居中

Question

我在div中有三个元素。我想把一个放在左边，一个放在中间，最后一个放在右边。我尝试过以下方法：

＆＃13;

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此外，我试图在div中单独包装这些元素，并将样式应用于这些div而不是元素。但是徽标总是粘在菜单图标上，因为从下面的代码片段可以看到它。为什么它不起作用？

Answer 1

目前，您的a显示为内嵌，这使其无法作为块居中。

此外，display:block与margin:0 auto无关，因为块的宽度为100％。你还需要一个给定的宽度才能工作。

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