Question

当我进行网页设计时，在需要时遇到问题

[LEFT LOGO]然后[TITLE（CENTER）]然后[RIGHT LOGO]

问题出现在RIGHT LOGO那里，它与LEFT LOGO不对齐。正确的徽标位于TITLE（CENTER）

的行下

这是我的代码示例，谢谢：

<div class="navigation">
<div id="left">
    <a title="Multimedia" href="#">
        <img src="images/logo.png"/>
    </a>
</div>
<div id="title">Tutor Program</div>
<div id="right">
    <a href="#" title="Inspire and Innovate">
        <img src="images/tagline_alt.png"/>
    </a>
 </div>

的CSS：

.navigation{
    height:auto;
    background-color:#666;
    width:85%;
    margin:auto;
    min-width:800px;
}
#title{
    text-align:center;
    margin: auto;
    font-family:‘Arial Black’, Gadget, sans-serif;
    font-size: 20px;
    color: #FFF;
}
#left {
    float: left;text-align:left;
    margin: auto;
}
#right {
    float: right;text-align:right;
    margin: auto;
}
a img { border: 0; }

Answer 1

我认为它的作品是另一种方式，我在样式宽度上有一些变化取决于徽标宽度。如果未设置在中心，则更改宽度％。

#title{
text-align:center;
margin: auto;
font-family:'Arial Black', Gadget, sans-serif;
font-size: 20px;
color: #FFF;
width:59%;
float:left;

}

.clear {
clear:both;
margin:0px;
font-size:0px;
}

并在最后一个div之后添加一个div，类为clear。

<div id="right"> .... </div> 
<div class="clear"> </div>

Answer 2

您还可以将您的div显示为table和table-cells，如下所示：

<强> HTML

<div class="navigation">
    <div id="left">
        left
    </div>
    <div id="title">
        title
    </div>
    <div id="right">
        right
     </div>
</div>

<强> CSS

.navigation {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.navigation > div {
    display: table-cell;
}
.navigation div:nth-child(1) { 
    background: lightgray; 
}
.navigation div:nth-child(2) { 
    background: gray; 
    text-align: center; 
}
.navigation div:nth-child(3) { 
    background: lightgray; 
    text-align: right; 
}

同时检查the JSFiddle Demo

Answer 3

只需将右侧容器移到左侧容器上方，请检查

<div class="navigation">
   <div id="right">
    <a href="#" title="Inspire and Innovate">
      <img src="images/tagline_alt.png"/>
      </a>
    </div>
    <div id="left">
    <a title="Multimedia" href="#">
       <img src="images/logo.png"/>
    </a>
   </div>
    <div id="title">Tutor Program</div>
</div>

需要有关css header float的帮助

3 个答案: