中心のdiv：右のdiv

Question

私はここにこのコードを持っている： https://jsfiddle.net/pj1zmL6j/

私はロゴと同じYに滞在するloginboxを取得しようとしています。

私は floatと display-inlineと私はグーグルで見つけた他の結果と異なる方法を試してみたが、ロゴを floatまたは display:absoluteを設定するとき、それは代わりに左に消えます（ただし、logoboxはプッシュダウンされません）

コード：

#top { 
 
    width: 100%; 
 
} 
 

 
#head { 
 
    float: left; 
 
    width: 694px; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 

 
#user { 
 
    width: 25%; 
 
    float: right; 
 
    margin: 0 25px 0 25px; 
 
    border: 1px solid white; 
 
    display: inline-block; 
 
}

<div id="top"> 
 
    <div id="head"> 
 
    <h1>logo</h1> 
 
    </div> 
 
    <div id="user">loginbox</div> 
 
</div>

Answer 1

を増やしてみてください

display: flex; 
align-items: center; 

ID

例に

：https://jsfiddle.net/zpo4gf75/2/

編集

私は中央にロゴの滞在のすべての時間を作ってみました。

チェックフィドル：https://jsfiddle.net/tksL54g0/2/

Answer 2

問題が解決し、動的な幅（パーセント）の使用です。ここで

は、あなたの目標を達成するためにのみ使用パーセントの例である：https://jsfiddle.net/v1wvyc1v/

#top { 
    width: 100%; 
} 

#head { 
    float: left; 
    width: 75%; 
    text-align: center; 
} 

#user { 
    width: 25%; 
    float: right; 
} 

あなたが一定の幅を持っている場合は、固定マージンと固定枠線のサイズは、あなたが問題に実行されます追加しました。これらのすべてがあなたのログインボックスを下にラップさせていました。