css - CSSのフローティングアイテムの問題

Question

私は次のことを達成しようとしています：

これまでのところ、私は次のことを行うことができました。

私の問題は次のとおりです。

1-「Inicio」と「Productos」を中央に配置できません。私はmargin：0 autoを試しましたが、何も動かないので無駄でした。マージン左を試してみると、移動できます。どうすればこれを「自動」中央に配置できますか？

2-「Inicio」と「Productos」が中央に配置されたら。画像に合わせたいのですが。もう一度、画像のタグを左にフロートさせ、ul liを右にフロートさせようとしましたが、何かがうまくいきません。

誰かが私がこれを行う方法を理解するのを手伝ってくれますか？

Answer 1

黄色の画像のように見せたい場合は、これを試してください：
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/

Answer 2

これがあなたが探している完璧な解決策です-

デモ-http://jsfiddle.net/d6dtJ/25/

Answer 3

こんにちはこれをチェックしてください私はこれがあなたを助けることを願っています：-

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/

Answer 4

これはあなたが望むことをするはずです、私はそれを単純に保つように努めました。