0

我正在努力实现以下目标：

在此处输入图像描述

到目前为止，我已经能够做到以下几点： 在此处输入图像描述

我的问题如下：

1- 我无法让“Inicio”和“Productos”居中。我试过 margin: 0 auto ，但因为没有任何动作而徒劳无功。如果我尝试 margin-left 我可以移动它。我怎样才能“自动”居中呢？

2- 一旦“Inicio”和“Productos”居中。我想与图像对齐。我再次尝试向左浮动图像标签并向右浮动 ul li ，但我得到了一些东西。

有人可以帮我弄清楚该怎么做吗？

4

4 回答 4

0

如果你想让它看起来像黄色图像，试试这个：
HTML

<div class="main">
    <p><a href="#">Avuda</a> <a href="#">Acceso</a> <a href="#">Registrarse</a></p>
    <img src="http://m.onkey.org/images/rails-logo.jpg?1314545460" />
    <div class="clear"></div>
    <div class="center"><a href="#">Inicoi</a> <a href="#">Productos</a></div>
</div>

CSS

div.main {
    background-color: yellow;
    overflow: hidden;
    text-align: center;
}
.clear {
    clear:both;
}
.center {
    float: left;
    margin: 15px 10px 0 25px;
}
img {
    float: left;
    margin-top: -5px;
}
p {
    text-align:right;}

你可以在这里看到结果：http: //jsfiddle.net/unrbd/

于 2012-05-18T06:47:23.753 回答
0

嗨，检查一下，我希望这会对您有所帮助：-

HTML

    <div class="header">

<div class="logo"><img src="http://alansmoneyblog.com/wp-content/uploads/2010/10/google-logo.jpg" /></div>
        <div class="nav">
        <a>Link one</a> <a>Link two</a> <a>Link three</a>
        </div>
        <div class="mid">    
            <a href="#">Inicio</a>
            <a href="#">Productos</a>
        </div>
    </div>

CSS

.header {
    border:1px solid black;
    overflow:hidden;
}
.logo {
    float:left;
    width:128px;
    height:128px;

}
.nav {
    float:right;
    width:213px;
    height:128px;

}
.mid {
    background:red;
    height:128px;
    text-align:center;
    margin-right:213px;
    margin-left:128px;
    line-height:80px;
}

看演示：- http://jsfiddle.net/d6dtJ/23/

于 2012-05-18T05:25:10.230 回答
0

这应该做你想做的事，我尽量保持简单。

于 2012-05-18T06:05:26.730 回答
0

这是您正在寻找的完美解决方案 -

演示 - http://jsfiddle.net/d6dtJ/25/

于 2012-05-18T04:03:11.930 回答