Расположение top_line

[KOLOKOLb4UK]

Приветствую.
Помогите пожалуйста расположить top_line по центру.
Из-за того, что у не авторизованных пользователей отсутствует часть кнопок - top_line съезжает
Намудрил я знатно в коде, знаю

Спойлер: top_line

.top_line{
    position: relative;
    width: 800px;
    margin: 0 auto;
    min-height: 10px;
}

Спойлер: Выравнивание лого под top_line

.logo {
    float: left;
    text-decoration: none;
    line-height: 45px;
    color: #FFF;
    font-family: "Ubuntu Condensed",sans-serif;
    font-size: 30px;
    text-shadow: 0px -1px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    outline: none;
    margin: 0px 0 0 325px;
}

Спойлер: Верхняя часть шаблона для авторизованных

<div class="header">
    <div class="top_line">
        <a title="{site_name}" class="logo" href="/">{site_name}</a>

Спойлер: Верхняя часть шаблона для не авторизованных

<div class="header">
    <div class="top_line">
        <a title="{site_name}" class="logo" href="/"><h1>{site_name}</h1></a>
        <nav class="menu">
            <ul id="nav">
                {menu}
            </ul>
        </nav>
        <div class="clear"></div>
    </div>
</div>
<div class="breadcrumb_wrap">
    <div class="wapper">
        <div class="user_info">
            <a href="">
              <img border="0" src="">
          </a>
          </div>
        <ul>
            <li class="active">{page_name}</li>
        </ul>
    </div>
</div>
<div class="wapper">
    <div class="content">
        <div class="left_block">

Вкратце, нужно сделать так, чтобы выравнивание шло по центру, независимо от кол-ва кнопок

Спойлер: Скриншот (не авторизован)

Спойлер: Скриншот (авторизован)

 

[Minni]

Попробуй:
<div class="top_line">
->
<div class="top_line t-c w-100">

и

<a title="{site_name}" class="logo" href="/"><h1>{site_name}</h1></a>
->
<a title="{site_name}" class="logo ma-0" href="/"><h1>{site_name}</h1></a>

P.S. не бейте палками, я не силен в css)

 

[KOLOKOLb4UK]

Minni, Ничего не вышло...
Давай попробуем найти вариант с изначально написанным кодом (без моих наработок)
Цель: вывести блок с кнопками в центр (в нашем случае topline) ((при любом кол-ве кнопок он должен находится в центре)) и вывести в центр текст (logo), который должен находится над блоком с кнопками (topline)

Спойлер: header и top_line

.header  { 
    min-height: 69px;
}

.top_line{
    position: relative;
    width: 1200px;
    margin: 0 auto;
    min-height: 5px;
}

Спойлер: logo (как я понял user и non-user)

.logo {
    float: left;
    text-decoration: none;
    line-height: 45px;
    color: #FFF;
    font-family: "Ubuntu Condensed",sans-serif;
    font-size: 30px;
    text-shadow: 0px -1px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    outline: none;
    margin-top: 10px;
}
.logo h1 {
    margin: 0px;
    padding: 0px;
    float: left;
    text-decoration: none;
    line-height: 45px;
    color: #FFF;
    font-family: "Ubuntu Condensed",sans-serif;
    font-size: 30px;
    text-shadow: 0px -1px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    outline: none;
}

Спойлер: Шаблон non-user

<div class="header">
    <div class="top_line">
        <a title="{site_name}" class="logo" href="/">{site_name}</a>
        <nav class="menu">
            <ul id="nav">
                {menu}
            </ul>
        </nav>
        <div class="clear"></div>
    </div>
</div>
<div class="breadcrumb_wrap">
    <div class="wapper">
        <div class="user_info">
            <a href="">
              <img border="0" src="">
          </a>
          </div>
        <ul>
            <li class="active">{page_name}</li>
        </ul>
    </div>
</div>
<div class="wapper">
    <div class="content">
        <div class="left_block">

Спойлер: Шаблон user

<div class="header">
    <div class="top_line">
        <a title="{site_name}" class="logo" href="/">{site_name}</a>

Один раз получилось сделать, чтобы в двух случаях блок был в центре, но это без лого, как только выставил лого - все поломалось...

 

[KOLOKOLb4UK]

Неактуально. Можно закрывать