• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Bootstrap - układanie się img niezależnie od align-items-center

Aruba Cloud - Virtual Private Server VPS
0 głosów
287 wizyt
pytanie zadane 7 października 2018 w HTML i CSS przez Moras Obywatel (1,620 p.)

Mam taki kawałek kodu:

<main>
		<div class="container">
			<section>
				<div class="row align-items-center" style="background-color:white;">
				
					<div class="col-md-5 col-sm-12" style="text-align:center;">
						
						<h1>Paradise</h1>
						<h2>Bar</h2>
						<p style="margin-bottom:13px;">Adres: Kilińskiego 2-20, 36-200 Brzozów</p>
						<p>Godz otwarcia:</p>
						<p style="margin-bottom:13px;">Poniedziałek - Piątek: 8:00-18:00</p>
						<p>Kontakt: 768975554</p>
						
					</div>
					
					<div class="col-md-7 col-sm-12">
						<iframe class="embed-responsive" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2580.873626698695!2d22.015939415988186!3d49.69435257937821!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473c42f21332fff5%3A0x4425da931f3f42b1!2sBar+Paradise!5e0!3m2!1spl!2spl!4v1538860561051" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
					</div>
				</div>
			</section>
</main>

 

Chcę wstawić pod podanym numerem telefonu ikone fb, ale jak próbuje to robić na tą ikonę wpływa klasa "align-items-center", która jest razem z klasą "row" przez co ikona również się centruje. Jak zrobić by na ikonę nie działała ta klasa? Proszę o pomoc.

komentarz 7 października 2018 przez Tomek Sochacki Ekspert (227,490 p.)
wrzuć na codepen html i css
komentarz 7 października 2018 przez Moras Obywatel (1,620 p.)

1 odpowiedź

0 głosów
odpowiedź 7 października 2018 przez arces Pasjonat (17,700 p.)

Align-items centruje Ci cały blok, ale w pionie, a nie w poziomie.

Na centrowanie ikonki FB w poziomie wpływa

text-align: center;

które nadałeś inline w kodzie.

Powinieneś unikać takiego kodowania i CSS oddzielać do osobnego pliku, a nie zapisywać w HTML przez atrybut "style".

komentarz 7 października 2018 przez Moras Obywatel (1,620 p.)
Właśnie chodzi mi o to,  żeby te ikony nie było centrowane w pionie razem z całą resztą.
komentarz 7 października 2018 przez arces Pasjonat (17,700 p.)
To zrób po prostu osobnego diva z align-center, tam załaduj to co chcesz mieć wycentrowane, a resztę daj pod spodem (w sensie ikonki). Ewentualnie zrób osobnego boxa dla ikonek, zrób absolutną pozycję dla nich i to powinno też pomóc, chociaż wg mnie to gorsze rozwiązanie.
komentarz 7 października 2018 przez Moras Obywatel (1,620 p.)
Próbowałem tak zrobić i nic się nie dzieje. Widocznie w bootstrapie ta klasa działa z klasą row. Próbowałem jeszcze nadać temu osobnemu divowi klasę d-flex, ale wtedy wszystko rozlewa się na jedną linię.
komentarz 7 października 2018 przez arces Pasjonat (17,700 p.)

Podobne pytania

0 głosów
1 odpowiedź 546 wizyt
+1 głos
2 odpowiedzi 775 wizyt
pytanie zadane 4 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
0 głosów
0 odpowiedzi 796 wizyt
pytanie zadane 11 kwietnia 2023 w HTML i CSS przez Flaven Początkujący (320 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...