float-элемент справа от div появляется за пределами

Question

Ну, я вернусь к тому, что делаю передние вещи, что на самом деле не мое, и я в тупике.

У меня есть div с логотипом, и мне нужно добавить текст в строку, вертикально центрированную внутри div. Каждый раз, когда я пытаюсь правильно перемещать элемент, он, кажется, оказывается вне div (как-то?).

Соответствующие HTML:

<div id="wrapper-header"> 
    <div id="wrapper-nav-header"> 
    <div id="header-logo"> 
     <span id="header-logo-span"><a href="/"><img src="mylogo.png" /></a></span> 
     <span id="header-customer-name">Customer Name</span> 
    </div> 
    </div> 
... 
</div> 

Соответствующий CSS:

#wrapper-header { 
    background-color: #fff; 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    padding: 0; 
    white-space: nowrap; 
    font-size: 13px; 
    line-height: 1 
} 

#wrapper-header #header-logo { 
    margin-left: 20px; 
    padding: 10px 0; 
} 

#wrapper-header #header-logo img { 
    max-height: 40px; 
    vertical-align: middle; 
} 

#wrapper-header #header-customer-name { 
    vertical-align: middle; 
} 

Что мне нужно сделать, чтобы получить этот-клиент имя-заголовка элемента плавать правильно?

Answer 1

Вы можете попробовать использовать гибкий прямоугольник:

html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#wrapper-header { 
 
    background-color: #fff; 
 
    position: fixed; 
 
    z-index: 999; 
 
    width: 100%; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    font-size: 13px; 
 
    line-height: 1 
 
} 
 

 
#header-logo { 
 
    margin-left: 20px; 
 
    padding: 10px 0; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#header-logo img { 
 
    max-height: 40px; 
 
    vertical-align: middle; 
 
} 
 

 
#header-customer-name { 
 
    flex-grow: 1; 
 
    text-align: right; 
 
}

<div id="wrapper-header"> 
 
    <div id="wrapper-nav-header"> 
 
    <div id="header-logo"> 
 
     <span id="header-logo-span"><a href="/"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></a></span> 
 
     <span id="header-customer-name">Customer Name</span> 
 
    </div> 
 
    </div> 
 
</div>

или вы можете рассчитать соответствующую прокладку к вашему header-customer-name так:

html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper-header { 
 
    background-color: #fff; 
 
    position: fixed; 
 
    z-index: 999; 
 
    width: 100%; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    font-size: 13px; 
 
    line-height: 1 
 
} 
 

 
#header-logo { 
 
    margin-left: 20px; 
 
    padding: 10px 0; 
 
} 
 

 
#header-logo img { 
 
    max-height: 40px; 
 
    vertical-align: middle; 
 
} 
 

 
#header-customer-name { 
 
    float: right; 
 
    padding: 12px 0; /*you can change for a more precise value*/ 
 
}

<div id="wrapper-header"> 
 
    <div id="wrapper-nav-header"> 
 
    <div id="header-logo"> 
 
     <span id="header-logo-span"><a href="/"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></a></span> 
 
     <span id="header-customer-name">Customer Name</span> 
 
    </div> 
 
    </div> 
 
</div>

В любом случае, если вы имеете в виду, что header-customer-name является прогулка на праве #wrapper-header, что, вероятно, потому, что он имеет position: fixed и width: 100%, поэтому я добавляю стиль:

html, body{ 
    margin: 0; 
    padding: 0; 
} 

Проверьте мой ответ здесь, чтобы лучше понять White Space Appears Right of Browser Window When at Full Screen

---

Это не имеет никакого отношения к вопросу, но может помочь вам

Не переутверждать

Как правило, не указывайте больше информации, чем это необходимо.

// bad 
ul#someid {..} 
.menu#otherid{..} 
#id1 #id2{...} 

// good 
#someid {..} 
#otherid {..} 
#id2{...} 

Answer 2

Try in fiddle

Изменить стиль таким образом ..

#wrapper-header #header-customer-name { 
vertical-align: middle; 
float: right; 
padding-top: 15px; /*value suits to your logo */ 
} 

Answer 3

У вас есть CSS код сброса в CSS-файлов, который связан с этой страницы. После того, как добавлен сброс css, проблема была решена. Demo

html, body { 
    margin:0; 
    padding:0; 
}