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

Wyśrodkowanie obrazka - Bootstrap, CSS, tabela.

VPS Starter Arubacloud
0 głosów
868 wizyt
pytanie zadane 16 listopada 2016 w HTML i CSS przez tatar Użytkownik (740 p.)

Dzień dobry,

szukałam już odpowiedzi na forum, jednak nadal jest problem - otóż nie wiem czemu, obrazek nie chce się wyśrodkować. Nieważne co nadpisuje, żadne centrowanie, ani ustawianie "display block; margin auto" nie daje skutku.

HTML:

<div id="content2">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tb_content2">
<div class="white_bg">
<img src="img/icon2.png" class="icon img-responsive"><span>TeXT</span>
<h1>Dzwonienie<br> stało się proste</h1>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="tb2_content2">
<img src="img/circle.png" class="circle img-responsive">
</div>
</div>
</div>
</div>
</div>

CSS:

#content2 h1{font-size: 50px;line-height: 55px;padding: 25px 0px;}
#content2 p {font-size: 20px;}
.icon{display: inline-block;padding-right: 15px;}
.tb_content2{display: table-cell;vertical-align: middle;height: 630px;}
.tb2_content2{display: table-cell;vertical-align: middle;height: 630px;}
.white_bg{background-color: #ffffff;padding: 30px 35px;}
.circle{padding-top: 30px;}

 

Jeśli ktoś miałby jakiś pomysł to bardzo proszę o wskazówki!

Pozdrawiam serdecznie :)

 

komentarz 16 listopada 2016 przez KamilloPL Gaduła (3,470 p.)
.icon{display: inline-block;padding-right: 15px;} - masz taka klase?
komentarz 16 listopada 2016 przez tatar Użytkownik (740 p.)
Może mieć ona wpływ na pozycjonowanie innego elementu? Dotyczy zupełnie innego elementu. Chodzi o <img src="img/circle.png" class="circle img-responsive">

3 odpowiedzi

0 głosów
odpowiedź 19 listopada 2016 przez Radek Wawrzyk Nowicjusz (200 p.)

Zobacz na swoją klasę z kolumnami. Do tego poczytaj sobie o offsetach w bootstrapie :)

0 głosów
odpowiedź 19 listopada 2016 przez Kamil Naja Nałogowiec (27,330 p.)
Powinno pomóc:

img {

margin: 0 auto;

display: block;

float: none }

albo jeszcze lepiej, nadanie klasy center-block w bs

Jeśli wyświetlanie to inline-block to elementowi nadrzędnemu nadajesz text-align center.

Jeśl element blokowy, to daj mu szerokość i margin-left: auto, margin-right: auto;

Jeśli pozycjonowanie relatywne lub absolutne, to ten sposób http://januszekodu.blogspot.com/2016/09/sposob-na-wygodne-wysrodkowanie-elementu.html

Albo dla elementu nadrzędnego daj display: flex; justify-content: center
–1 głos
odpowiedź 16 listopada 2016 przez pablop76 VIP (123,060 p.)
Witam. Korzystasz z bootstrapa więc kawałek kodu nie wystarczy. Daj nazwę frameworka.
komentarz 20 listopada 2016 przez pablop76 VIP (123,060 p.)
Z kodu wynika ,że content2 zawiera container a w nim jest grid. Czyli rząd z dwoma kolumnami. W każdej kolumnie jest pojemnik a w nim obrazek z treścią.  Z podanego css kolumnu ustawione są jedna pod drugą. Więc o czym mowa. Albo css wycięty z kontekstu albo do poprawki.

Podobne pytania

0 głosów
1 odpowiedź 611 wizyt
pytanie zadane 2 czerwca 2017 w HTML i CSS przez hiper007 Stary wyjadacz (11,270 p.)
0 głosów
3 odpowiedzi 4,408 wizyt
pytanie zadane 23 czerwca 2015 w HTML i CSS przez SikorKK Użytkownik (610 p.)
0 głosów
2 odpowiedzi 1,093 wizyt
pytanie zadane 14 kwietnia 2017 w HTML i CSS przez Kamil Czech Dyskutant (7,700 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...