| Autor | Zpráva | ||
|---|---|---|---|
| lionel messi Profil |
#1 · Zasláno: 3. 11. 2019, 13:19:43
Peknú nedeľu všetkým pánom webového tvorstva,
mám div, v ktorom potrebujem vertikálne vycentrovať prostý text a tlačidlo. Tlačidlo chcem umiestniť na pravý okraj divu pomocou float, čo mi však rozbije vertikálne centrovanie: Živá ukázka Ak odstránim float tlačidla, vertikálne zarovnanie funguje, ibaže (samozrejme) nie je na pravom okraji divu. Budem veľmi vďačný za každé nasmerovanie. |
||
| RastyAmateur Profil |
#2 · Zasláno: 3. 11. 2019, 14:09:41
lionel messi:
Pokud to máš opravdu takto statické (tj. máš height: 80px), můžeš tomu nastavit tebou předpočítaný margin. Buttonu dáš třeba height: 60px; margin: 10px 0;
Další možností by bylo použít flex. Poslední možností, co mě napadá, by bylo nastavit buttonu nějakou šířku ( width: 200px), display: inline-block a tomu odstavci před tím nastavit šířku tak, aby se to zarovnalo hezky vedle sebe (width: calc(100% - 200px);).
|
||
| lachim15 Profil |
Tohle by ti fungovat mělo :) Přepracoval jsem tvůj návrh tak, aby byl zároveň i responzivní.
V podstatě jsem původnímu divu (gdpr) nastavil display na table (udělal z něj tabulku). A do něj přidal další buňku (display s table-cell) - to mi umožnilo pohodlně zarovnat text vertikálně na střed. Zároveň jsem bg_frame nastavil pravý padding na 150px a vytvořil tak místo pro náš button (to se neobešlo bez box-sizing: border-box;, aby se nám zachovalo width:100% a nerozšířilo se to kam nemělo).
Díky tomu, že bg_frame má position:relative; můžu u button_position nastavit position:absolute; a zarovnat tento div i s buttonem na připravené místo přes padding.
Pak už jen zbývalo vycentrovat button vertikálně, použil jsem proto padding-top:19px; u divu button_position.
Živá ukázka |
||
|
Časová prodleva: 4 roky
|
|||
0