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

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

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, а не на ячейку таблицы и добавьте margin: auto

http://jsfiddle.net/3j5kc/

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