Czy można w jakiś sposób wycentrować padding w cssach wewnątrz jakiegoś elementu?
Wycentrowanie paddingu
- Rejestracja: dni
- Ostatnio: dni
- Postów: 526
0
Co masz na myśli pisząc "wycentrować padding"? Padding to odstęp zawartości elementu od jego krawędzi więc ciężko żeby był wycentrowany. A jeśli chcesz żeby po obu stronach był taki sam odstęp to wystarczy padding-left i padding-right ustawić tą samą wartość.
- Rejestracja: dni
- Ostatnio: dni
0
Tak aby np. jakiś tekst był po środku w jakimś elemencie. Czy da się to zrobić automatycznie? Czy trzeba to ręcznie dopasować tak aby tekst był centralnie po środku w jakimś elemencie?
- Rejestracja: dni
- Ostatnio: dni
- Lokalizacja: Tuchów
- Postów: 12269
0
To się robi za pomocą text-align: center, natomiast w pionie za pomocą vertical-align: middle.
- Rejestracja: dni
- Ostatnio: dni
0
Dziwne bo dałem wewnątrz elementu vertical-align: middle i nie wycentrowało tekstu, który w nim się znajduje
- Rejestracja: dni
- Ostatnio: dni
0
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
p {
background-color: red;
height: 200px;
font-family: verdana;
font-size: 20px;
vertical-align: middle;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Nie wyrównało tekstu w pionie.
- Rejestracja: dni
- Ostatnio: dni
- Lokalizacja: Tuchów
- Postów: 12269
0
p {
display: block;
background-color: red;
height: 200px;
line-height: 200px;
font-family: verdana;
font-size: 20px;
vertical-align: middle;
}
- Rejestracja: dni
- Ostatnio: dni
0
To ty w sumie tutaj za pomocą line height to wyrównałeś a nie vertical-align. Bo po usunięciu vertical-align efekt się utrzymuje.
- Rejestracja: dni
- Ostatnio: dni
0
Do końca poprawnie ten sposób nie działa, bo jeśli będę chciał mieć wyśrodkowane w pionie więcej niż jedną linijkę tekstu to między kolejnymi liniami tekstu tworzy się odstęp 200px.
- Rejestracja: dni
- Ostatnio: dni
- Lokalizacja: Tuchów
- Postów: 12269
0
Gdybyś sensowniej i obszerniej opisał problem to by można konkretne rozwiązanie podsunąć.
Wrzuć to co masz np. na jsfiddle i podrzuć link.
- Rejestracja: dni
- Ostatnio: dni
- Rejestracja: dni
- Ostatnio: dni
- Postów: 335
1
Zależnie co chcesz osiągnąć, możesz skonstruować pseudotabelę albo wycentrować via translate. W przypadku tabeli to byłoby tak:
<div class="table">
<div class="table-cell">
This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph..
</div>
</div>
.table { display: table; width: 100%; }
.table-cell { display: table-cell; vertical-align: middle; height: 300px; background: red; }
- Rejestracja: dni
- Ostatnio: dni
- Lokalizacja: Tuchów
- Postów: 12269
0
W sieci możesz znaleźć różne sposoby, jednak z tego co widzę, większość korzysta z dodatkowego kontenera do opakowania paragrafu. To co podał @hapertown to i tak dość proste rozwiązanie, przy czym kodu nie trzeba wiele.