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: 5 let
|
0