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

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.)

Wystarczy ten link? https://codepen.io/Moras15/full/XxjwXJ

1 odpowiedź

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ę.