[SuchyArbuz]

Jak wycentrować w pionie diva w którym znajduje się tekst? próbowałem absolutem i top calc, ale to tylko pośrednie rozwiązanie bo w zależności od długości tekstu trzeba zmieniać szerokość, a ma to się robić automatycznie. Próbowałem też elementy ustawiać inline-blockiem. Margin-top oczywiście odpada bo element ma się znajdować cały czas w tym samym miejscu niezależnie od rozdziałki, może jakoś flexem da się to zrobić? Głupi problem ale nie jestem w stanie go jakoś normalnie ogarnąć.
#webdev #frontend

[emtei]

@rwietowara: Najlepiej flex. A po staremu to:

Dla nadrzędnego diva position relative.
Dla elementu:
{
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}

Jeśli ta sekcja ma być na całą wysokość ekranu to możesz też użyć jednostek vw i vh

[SuchyArbuz]

@emtei: sekcja ma już hv nadane, tylko na dole jest before i after dla kolejnej sekcji, spróbuję w takim razie flexa

[Adam_pasztecik_czwarty]

@SuchyArbuz: Okej, jeśli masz div'a np. który ma position: absolute; top, left, right, bottom = 0; i width = height = 100% to daj mu display: flex; align-items: center; justify-content: center; Dziecko div'a będzie wyśrodkowane w poziomie i w pionie. O to chodziło?

[SuchyArbuz]

@Adam_pasztecik_czwarty:

[xDrope]

@SuchyArbuz: ta szczałka jest dorysowana czy cssem to ogarnąłeś?

[SuchyArbuz]

@xDrope: css, jak wyżej napisałem, to jest border z beforem i afterem

[Adam_pasztecik_czwarty]

@SuchyArbuz: Zwrappuj button oraz heading w div'a. Wtedy ten div (który jest childem tego caaałego div'a) będzie wyśrodkowany.

[Adam_pasztecik_czwarty]

@SuchyArbuz: Poradziłeś sobie?

[SuchyArbuz]

@Adam_pasztecik_czwarty: http://codepen.io/worekgowna/pen/JEmxPR pogubiłem się w tym wszystkim :D

[p.....e]

@SuchyArbuz: srexa a nie flexa..
Panowie a co z IE? ᕦ(òóˇ)ᕤ
Najłatwiej jest przy pomocy absolute top, left 50% i translate -50% -50% - problem pojawia się gdy wyjdzie połówka to wtedy możemy uzyskać niechciany efekt blur ale coś za coś

[Adam_pasztecik_czwarty]

@SuchyArbuz: https://jsfiddle.net/ca9jqf11/

[Adam_pasztecik_czwarty]

@podupimie: @SuchyArbuz: Czy ta strona ma wspierać IE9? IE11 i 10 sobie radzą z flexem. Ale tak, jeszcze można zrobić jak pisze podupimie. Co do flexa. Jeśli content będzie miał większą wysokość niż "hero" to będzie wychodził poza jego obszar (ale nadal będzie wyśodkowany).

[Adam_pasztecik_czwarty]

@SuchyArbuz: Odblokuj PW

[p.....e]

@Adam_pasztecik_czwarty: a czemu ma nie wpierać?

[SuchyArbuz]

@Adam_pasztecik_czwarty: Raczej bez wsparcia, aż takim masochistą to nie jestem, ale spróbowałem tego twojego sposobu i dalej mi to się wszystko rozjeżdża :v, zobaczę jeszcze jak to sposobem @podupimie będzie wyglądać

[SuchyArbuz]

@Adam_pasztecik_czwarty: już

[fermentka]

@SuchyArbuz: proszzz, inna metoda ;)

HTML:


Lorem ipsum dolor sit amet.
===========================

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

daj plusa

CSS:
.parent {
height: 100vh; //nie moze byc w 100%, musi w vh lub px
display: table;
width: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
width: 100%;
}

[SuchyArbuz]

@fermentka: @Adam_pasztecik_czwarty już mi pomógł ale dzięki mimo wszystko :)

[blackmaul]

@fermentka: zapstuję tu sobie, żeby na przyszłość to znaleźć ( ͡° ͜ʖ ͡°)