Wyśrodkowanie obrazka - Bootstrap, CSS, tabela.

Question

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

 

Comments

.icon{display: inline-block;padding-right: 15px;} - masz taka klase?

---

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">

Answer 1

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

Answer 2

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

Answer 3

Witam. Korzystasz z bootstrapa więc kawałek kodu nie wystarczy. Daj nazwę frameworka.

Comments

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.