Как центрировать div, сохраняя внутри div на одной и той же строке в css?

Просто установите для #nav div фиксированную ширину (общую ширину содержащихся элементов) и установите отображение для блокировки. Затем очистите свои поплавки после элементов, чтобы поддерживать #nav div, окружающий их. Не используйте табличную ячейку в качестве дисплея.

CSS

#nav { display: block; width: 416px; }

HTML

<div id="nav">
<div id="bark"></div>
<div id="profile"></div>
<div id="read"></div>
<div id="write"></div>
<div style="clear: both;"></div>
</div>

Попробуй это

#nav{
    padding:10px;
    background-color:rgb(77,77,77);
    display: inline-table;
    vertical-align:middle;
    width: 70%;
    margin-left: 15%;
}

проверить эту скрипку

измените свой контейнер div для display: table not table-cell и добавьте margin: auto

http://jsfiddle.net/3j5kc/

#nav{
    padding:10px;
    background-color:rgb(77,77,77);
    display: table;
    margin: auto;
    vertical-align:middle;
}