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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
1,101 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,550 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,540 p.)
Witam. Korzystasz z bootstrapa więc kawałek kodu nie wystarczy. Daj nazwę frameworka.
komentarz 20 listopada 2016 przez pablop76 VIP (123,540 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ź 649 wizyt
pytanie zadane 2 czerwca 2017 w HTML i CSS przez hiper007 Stary wyjadacz (11,270 p.)
0 głosów
3 odpowiedzi 4,731 wizyt
pytanie zadane 23 czerwca 2015 w HTML i CSS przez SikorKK Użytkownik (610 p.)
0 głosów
2 odpowiedzi 1,459 wizyt
pytanie zadane 14 kwietnia 2017 w HTML i CSS przez Kamil Czech Dyskutant (7,700 p.)

93,191 zapytań

142,206 odpowiedzi

322,040 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2817p. - dia-Chann
  2. 2769p. - Łukasz Piwowar
  3. 2759p. - Łukasz Eckert
  4. 2738p. - CC PL
  5. 2704p. - Tomasz Bielak
  6. 2678p. - Łukasz Siedlecki
  7. 2666p. - rucin93
  8. 2485p. - Marcin Putra
  9. 2475p. - Adrian Wieprzkowicz
  10. 2426p. - Mikbac
  11. 2418p. - Michal Drewniak
  12. 2239p. - Michał Telesz
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1650p. - Mariusz Fornal
Szczegóły i pełne wyniki

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!

...