Pozycjonowanie strony z pomocą position:absolute; .

pytanie zadane 20 lipca 2018 w HTML i CSS przez kubusop Początkujący (420 p.)
zamknięte 20 lipca 2018 przez kubusop

Chcę wyśrodkować div logo_img i logo_name które są umieszczone w divie logo. Chcę, aby całość była wyśrodkowana. Nie mogę zrobić tego za pomocą margin-left:auto itd. ponieważ nie znam szerokości napisu, a position:absolute; left:auto; right:auto; nie działa.

HTML:

<body>
	<header>
		<div class="logo">
			<div class="logo_img"><img src="img/logo.png"></div>
			<div class="logo_name">Sklep internetowy</div>
			<div style="clear:both;"></div>
		</div>
	</header>
</body>

CSS:

body {
    background-color: #efefef;
    margin: 0;
    padding: 0;
}


.logo 
{
    position:absolute;
	left:auto;
	right:auto;
    margin-top: 40px;
}

.logo_img img 
{
    float: left;
    width:150px;
    height:80px;
}
.logo_name 
{
    float: right;
    text-transform: uppercase;
    font-size: 30px;
}

komentarz zamknięcia: Problem rozwiązany

komentarz 20 lipca 2018 przez Shaoi Mądrala (7,020 p.)

Flexbox?

2 odpowiedzi

odpowiedź 20 lipca 2018 przez Storkeus Obywatel (1,120 p.)
wybrane 20 lipca 2018 przez kubusop

Najlepsza

Spróbuj czegoś takiego

.logo
{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

Ustawiamy element w połowie wysokości i szerokości elementu nadrzędnego. Domyślnie pozycjonowany jest lewy górny róg elementu, dlatego musimy przesunąć go o połowę jego wysokości i szerokości.

komentarz 20 lipca 2018 przez Storkeus Obywatel (1,120 p.)

Nie doczytałem, że chcesz wyśrodkować tylko w poziomie, wtedy oczywiście byłoby tylko

.logo
{
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
}

ale w sumie nie jestem pewien, czy jest to potrzebne, kolega w komentarzu ma rację flexbox byłby tu prostszym rozwiązaniem, efekt jakiego potrzebujesz można uzyskać np. tak:

.logo
{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

komentarz 20 lipca 2018 przez kubusop Początkujący (420 p.)

@Storkeus, Ok dzięki wyśrodkowało się tylko teraz jest problem, że nie działa float: left; i napis nie ustawia się tak jak powinien.

2	komentarz 20 lipca 2018 przez Shaoi Mądrala (7,020 p.) Spróbuj usunąć flex-direction, oraz float.

komentarz 20 lipca 2018 przez kubusop Początkujący (420 p.)

Ok, dzięki. Działa.

odpowiedź 20 lipca 2018 przez hazel Nowicjusz (160 p.)

Podobne pytania

0 głosów

2 odpowiedzi 463 wizyt

Nie działa mnie position: absolute

pytanie zadane 24 sierpnia 2018 w HTML i CSS przez redEyes Nowicjusz (120 p.)

0 głosów

2 odpowiedzi 226 wizyt

Wyświetlanie rozwijanego sticky menu (problem z position: ... ;)

pytanie zadane 26 marca 2017 w HTML i CSS przez Danieluss Nowicjusz (120 p.)

0 głosów

2 odpowiedzi 166 wizyt

CSS HTML position absolute

pytanie zadane 18 października 2022 w HTML i CSS przez EmilB Użytkownik (980 p.)

Pozycjonowanie strony z pomocą position:absolute; .

Zaloguj lub zarejestruj się, aby skomentować.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci