| Autor | Zpráva | ||
|---|---|---|---|
| ForestCZE Profil |
Zdravím, obracím se na fórum s nejspíše triviální věcí, ale pro mě je to složité. Dokážu se naučit cokoliv nového v PHP OOP, ale ty kaskádové styly nedokážu pochopit a bojuji s nimi již několik let.
Pokusil jsem se udělat toto. Potřebuji, aby ty údaje na té kartě začínaly např. 10px od té "paní" zprava a od toho až ke konci to našlo střed a horizontálně to bylo vycentrované v závislosti na textu. A dále aby to bylo vycentrované vertikálně. Nevím, zda mi budou stačit styly nebo bude potřeba i JS. Každopádně s tímhle bojuji už strašně dlouho a nevím, jak se dobrat výsledku třeba i pomocí googlu. Budu vděčný za ukázku a vysvětlení. Předem děkuji. |
||
| Tomáš123 Profil |
ForestCZE:
Riešil by som to nejako takto, ale sú aj iné možnosti. Centrovať horizontálne klasicky pomocou text-align: center.
Pozri sa na: Centrování na webových stránkách. Mimochodom, to HTML nie je nič moc. Má to byť nejaký zoznam údajov? Použi <ul>. Chcú to byť kontaktné údaje? Zváž <address>. To meno má byť významnejšia časť tej kartičky? Hodí sa tam <strong>. Namiesto hromady tried potom využiješ špecifickejší selektor v CSS:
.card_data strong {}
.card_data li {} |
||
| ForestCZE Profil |
#3 · Zasláno: 21. 5. 2020, 14:42:17
Tomáš123:
Moc děkuji. Rád bych věděl, jak jsi došel k těm číslům u první možnosti. Obrázek je o 30px na šířku a o 85px na výšku menší. A ty paddings padding: 60px 20px 25px 10px; a padding-left: 150px;
|
||
| Tomáš123 Profil |
ForestCZE:
„Obrázek je o 30px na šířku a o 85px na výšku menší.“ Pozícia toho textu vo vnútri je trochu iná (zas na pixely som sa nehral), ale blok ako taký by sa mal zobraziť presne rovnako (ak mu niekde inde nenastavuješ box-sizing: border-box). 30px je súčet horizontálnych paddingov, 85px je súčet vertikálnych paddingov.
Hodnoty som nastavil od oka. Išlo o to vykompenzovať grafické „nerovnosti“ paddingom, aby ostala akási lišta v strede, v rámci ktorej môžeme vertikálne centrovať bez ďalších posunov.
Ak otázka smerovala k tomu, prečo je každá hodnota toho paddingu iná, je to preto, že som sa k tomu nevrátil a nezjednotil to. Pokojne by CSS mohlo vyzerať aj takto:
.card_woman {
width: 235px;
height: 135px;
padding: 60px 25px 25px 160px;
background-image: url('https://i.ibb.co/dDWTb0t/doctor1.png');
color: #fff;
display: table;
}
.card_data {
display: table-cell;
vertical-align: middle;
} |
||
|
Časová prodleva: 4 roky
|
|||
0