2

当我做我的网页设计时，在我需要做的时候遇到问题

[左标志] 然后 [标题（中心）] 然后 [右标志]

问题出现在 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; }
4

3 回答 3

0

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

#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>
于 2013-08-18T10:38:18.173 回答
0

只需将右容器移到左容器上方检查下方

<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>
于 2013-08-18T14:36:22.183 回答
0

您还可以将 div 显示为tableand 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; 
}

还要检查JSFiddle 演示

于 2013-08-18T11:10:31.537 回答