Problem z wyśrodkowaniem tekstu- brak reakcji na display:inline-block oraz float: left

pytanie zadane 5 grudnia 2018 w HTML i CSS przez NewbieLemoo Nowicjusz (160 p.)
edycja 5 grudnia 2018 przez NewbieLemoo

Cześć! Od dłuższego czasu siedzę i myślę, jakby tu rozwiązać pewien problem. Mianowicie; wziąłem na bazę plik z odcinka HTML5 cz. 5 i postanowiłem podzielić nagłówek na dwie części: Z lewej dodać kwadratowe logo Z prawej wyśrodkowany Tytuł

Niestety niezależnie od tego czy używam display:inline-block czy też float: left; +text-align: center nic się nie zmienia, a tekst jest wyrównany do lewej i do dołu. Ktoś pomoże HTML'owemu noobowi :)?

KOD HTML


<body>
	<header>
		<div class="nag">
			<img src="img/logos.png"/>
			Philosophia blog
		</div>
		
        <nav>
			<ul class="menu">
				<li><a href="#">Strona główna</a></li>
				<li><a href="#">Pierwszy raz tutaj</a></li>
				<li><a href="#">Dlaczego filozofia</a></li>
				<li><a href="#">o autorze</a></li>
				<li><a href="#">kontakt</a></li>
			
			</ul>
		</nav>
	</header>

CSS

.nag
{
	font-size: 44px;
	text-align: center;
	color: white;
	text-transform: uppercase;
	display: inline-block;
	height: 40px;
	
}

nav
{
	background-color: #1c74b2;
	text-align: center;
}

komentarz 5 grudnia 2018 przez pablop76 VIP (123,400 p.)

Pokaż jak używasz tych właściwości, bo za ich pomocą można uzyskać pożądnany efekt. I popraw bloczek plain-text na html

3 odpowiedzi

odpowiedź 5 grudnia 2018 przez arces Pasjonat (17,700 p.)

Odpuść sobie te stare metody z float. Nie ucz się przestarzałych kursów i zacznij już od flexboxa. To jest teraz na czasie i bardzo ułatwia budowanie layoutu strony. Float to już przeżytek i rzadko kiedy się go stosuje (chyba, że bardzo zależy na wsparciu bardzo starych przeglądarek).

komentarz 5 grudnia 2018 przez pablop76 VIP (123,400 p.)

Akurat float do opływania obrazka przez tekst jest stworzony i chyba nic się tu nie zmieniło?

komentarz 5 grudnia 2018 przez arces Pasjonat (17,700 p.)

Dlatego napisałem, że rzadko się go stosuje, ale wyjątki są

odpowiedź 5 grudnia 2018 przez Greeenone Pasjonat (16,100 p.)

Musisz nadać szerokość. Użyj display: block; inline oraz inline block domyślnie mają szerokość danego elementu. Block rozciąga się na całą możliwą szerokość

komentarz 5 grudnia 2018 przez pablop76 VIP (123,400 p.)
przywrócone 6 grudnia 2018 przez pablop76

inline oraz inline block domyślnie mają szerokość danego elementu

inline-block ustawia się w linii poza tym zachowuje się jak element blokowy

komentarz 6 grudnia 2018 przez Greeenone Pasjonat (16,100 p.)

Po za tą różnicą, że inline-block nie rozciąga się domyślnie na całą szerokość

komentarz 6 grudnia 2018 przez pablop76 VIP (123,400 p.)

Tak.Mój błąd.

Elementy inline-block są podobne do elementów śródliniowych z wyjątkiem tego, że mogą mieć dopełnienie i marginesy ze wszystkich czterech stron.