Wypośrodkowanie tekstu w headerze, tak, aby szerokość button-ów nie była uwzględniana?

0
<header class="container">
  <div class="navbar navbar-default navbar-fixed-top" >
    <h1> Rejestracja urządzeń fizycznych</h1>
    <button class="btn btn-success btn-xs">Zaloguj</button>
    <button class="btn btn-warning btn-xs">Zarejestruj</button>            
  </div>
</header>

Jak widzicie mam sobie nagłówek i dwa buttony i teraz mam taki problem, że chciałbym wypośrodkować nagłówek dokładnie na środek heade-ra, a jedyne co udało mi się osiągnać to ustawienie ,że jest on przesunięty w lewo o szerokość przycisków. I właśnie o to się wszystko rozbija jak wypośrodkować nagłówek w heade-rze, żeby szerokość button-ów nie była uwzględniana?

0

buttonom daj klasę pull-right i będzie śmigać.

0

W sumie to mógłbys jeszcze pyknąć coś w tym stylu wewnątrz <div class="navbar navbar-default navbar-fixed-top">

 <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <h1> Rejestracja urządzeń fizycznych</h1>
    </div>
    <div class="col-md-2">
        <button class="btn btn-success btn-xs" ">Zaloguj</button>
        <button class="btn btn-warning btn-xs">Zarejestruj</button> 	  
    </div>
</div>

W sumie dzięki temu będziesz mógł ciutkę prościej sterować niż pull-right'em

0
<div style="position: relative; min-height: 150px">
    <div style="position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">
        Dokładnie wyśrodkowany element
    </div>
</div>
0

Ok, zastosowałem się na razie do pierwszej porady z pull-rightem i problem jest teraz taki, że buttony nie są w jednej linii z headerem :( Dodam wcześniej, że na div-ie miałem ustawiony display:flex -> stąd też były w jednej linii :)

1

Nie są w jednej linii bo klasa pull-right dodaje do elementu float: right; Może przerobisz najpierw pierwszy lepszy kurs css, a dopiero potem będziesz próbował samemu coś klepnąć?

1 użytkowników online, w tym zalogowanych: 0, gości: 1