Chciałbym aby środkowy element był wyrównany w poziomie względem całej strony mając dwa elementy: jeden przylega do lewej strony a drugi chciałbym żeby był po środku strony w poziomie. Jak to najlepiej zrobić? Ten środkowy element zawsze jest wyrównany bardziej do prawej strony i nie wiem jak to rozwiązać.
0
1
Daj jakiś kod z szablonem tego, co chcesz sobie wyrównać.
0
Chciałbym aby div z klasą content znajdował się z lewej strony, a div z klasą otherContent był obok diva z klasą content wyrównany w poziomie tak aby znajdował się po środku.
Link do szablonu: https://jsfiddle.net/xvpou1gm/
1
Chyba najlepiej będzie to zrobić w oparciu o GRID:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/pl/docs/Web/CSS/CSS_Grid_Layout
albo FLEX:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp
https://developer.mozilla.org/pl/docs/Learn/CSS/CSS_layout/Flexbox
https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/
Oczywiście, można się bawić w różne kobinacje w stylu display: inline-block czy walczyć z marginesami, ale moim zdaniem podane powyżej narzędzia pozwolą Ci to zrobić porządnie i w pełni zgodnie ze standardami. Ponadto, jak się nauczysz jednego (albo obu) to potem będziesz z tego korzystać często. Na początku może być dziwne i niezrozumiałe, ale w pewnym momencie coś cyknie i wszystko stanie się łatwe ;)
Możesz też rzucić okiem na bloga Smoczycy - @Freja Draco zrobiła fajne kompendium odnośnie Flex'a - Flexbox - standardowe i nies...
0
Próbowałem na flexie, ale ciągle ten drugi element nie jest wycentrowany. Jest za mocno przesunięty w prawo. Grida natomiast nie wspiera IE.
1
https://caniuse.com/#search=flex
https://caniuse.com/#search=grid
Rzeczywiście, na IE mogą być problemy, ale zauważ, że po pierwsze to IE11 (czyli ostatnia wersja, która została dawno temu zaorana) zostało wypuszczone prawie 10 lat temu, a do tego był on powiązany z Windows7, który ma status systemu porzuconego, z zakończonym wsparciem producenta, więc to tak, jakbyś się przejmował, że coś nie działa na Firefox w wersji 42 ;)
A po drugie - jeśli ktoś korzysta z takiej przeglądarki (zarówno badziewnej - bo to IE, jak i jeszcze mocno przestarzałej) to pół (i to raczej zdecydowanie większe pół) internetu także nie będzie mu chodzić, więc nie powinieneś się w ogóle tym przejmować. Wszystkie nowoczesne przeglądarki od dobrych kilku lat to obsługują - FF, Chrome, Edge czy nawet (za przeproszeniem) Safari. Moim zdaniem Flex czy Grid nie są jakimiś wynalazkami, ale od pewnego czasu standardem, więc jeśli ktoś korzysta z przeglądarki, która ich nie rozumie, to jest jego problem, a nie Twój.
0
Niby mogę dodać pusty 3 element i dać justify-content: space-between, ale wtedy właśnie ten drugi element jest zbyt do prawej strony: https://jsfiddle.net/nq6bmpxc/
1
Chyba nie do końca rozumiem, co chcesz osiągnąć. Czy możesz narysować to i wrzucić tutaj obrazek z tym, czego pragniesz?
0
Czerwony element to strona. Czarny to element, ktory ma sie znajdowac z lewej strony, a zielony element ma się znajdować po środku strony. Te dwa elementy mają być wyświetlane in-linowo.
1
Chyba rozumiem, o co Ci chodzi. Nie chcesz, żeby zielony kwadrat był na środku wolnej przestrzeni między końcem czarnego a prawą krawędzią ramki, tylko po prostu na środku czerwonej ramki. W takim razie bym to zrobił tak:
Całość dzielisz na 3 części: środkowa ma stałą szerokość, a lewa i prawa mają wypełnić po równo pozostałą przestrzeń.
Jak będziesz skalować okno, to lewy i prawy element się będą rozciągać/kurczyć, ale w ten sam sposób, więc zawsze będą równe. A skoro środkowy element ma po obu stronach taki sam odstęp, to moim zdaniem będzie na środku ;)
1
czyli tylko dla środkowego elementu należy nadać wartość dla właściwości width?
No tak - on ma mieć stałą szerokość, a te dwa po bokach mają się dopasowywać tak, aby po równo wypełnić wolną przestrzeń. W ten sposób element centralny powinien być wyśrodkowany. Ale ważne - będzie wyśrodkowany względem czerwonej ramki, a nie zawartości elementów otaczających. Dlatego może pojawić się efekt jak na poniższym obrazku - będzie wrażenie, że centralny nie jest na środku, bo odstęp od prawej krawędzi ramki (B) oraz od prawego końca tekstu w lewym elemencie (A) będą różne. Ale zakładam, że o takie coś Ci chodzi.
4
Tak na szybko zrobiłem - rzuć okiem na poniższy link i daj znać, czy chodziło Ci o coś takiego: https://jsfiddle.net/2531pdxz/1.
Podczas skalowania środkowy element jest niezmienny, natomiast dwa po bokach go opływają i po równo wypełniają wolną przestrzeń. Nie jest to napisane jakoś pięknie, ale działa ;)
i sam kod:
<div id="ramka">
<div class="otoczenie">
</div>
<div class="centruj">
</div>
<div class="otoczenie">
</div>
</div>
div#ramka {
width: 100%;
height: 200px;
border: 3px solid red;
display: flex;
}
div.otoczenie {
border: 2px solid yellow;
height: 50px;
margin: 3px;
flex-grow: 1;
}
div.centruj {
border: 2px solid green;
height: 50px;
margin: 3px;
width: 100px;
flex-grow: 0;
}
0
@cerrato: nie wiem czemu, ale u mnie na stronie nadal jest ten środkowy element zbyt bardzo wysunięty w prawo i nie jest idealnie wycentrowany. Jak lewy element nie ma żadnej zawartości to jest ok natomiast jak się doda to już nie jest tak idealnie: https://jsfiddle.net/og69ryje/1/
2
Rzuć w takim razie okiem na https://jsfiddle.net/etwa61jq/. Jedyny minus - przy mocnym zmniejszaniu tekst z lewego panelu może nachodzić na sąsiednie pola. Pewnie da się to zrobić lepiej, ale na razie nie mam czasu ani pomysłu na walkę z tematem ;) W każdym razie - działa, treść/zawartość lewego panelu nie ma wpływu na jego szerokość.
<div id="ramka">
<div class="otoczenie">
<div class="noresize">
<a href="https://www.google.com/">Buy tickets</a>
<a href="https://www.google.com/">Second link</a>
</div>
</div>
<div class="centruj">
</div>
<div class="otoczenie">
</div>
</div>
div#ramka {
width: 100%;
height: 200px;
border: 3px solid red;
display: flex;
}
div.otoczenie {
border: 2px solid yellow;
height: 50px;
margin: 3px;
flex-grow: 1;
}
div.centruj {
border: 2px solid green;
height: 50px;
margin: 3px;
width: 100px;
flex-grow: 0;
}
div.noresize {
position: absolute;
}