dodání ihned! nové
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
BF
Avatar
pgarsky
Člen
Avatar
pgarsky:29.7.2016 12:39

Ahoj, nedávno jsem tu zakládal vlákno o tom, jak udělat pomocí CSS kruh a do něj vepsat text. Avšak objevil se tu problém, se kterým bych vůbec nepočítal. Co je tedy za problém? Nemůžu psát na další řádek. Můžu napsat jen na jeden a poté se text píše pod kruh a ne do něj. Pomůžete mi, prosím?
Zdroják (CSS):

.onas {
    border: 2px solid white;
    border-radius: 50%;
    display: inline-block;
    color: white;
    width: 350px;
    height: 350px;
    text-align: center;
    line-height: 350px;
}
.onas h2 {
    font-size: 20px;
    text-align: center;
    color: white;
}

Zdroják (HTML):

<div class="onas">
    <h2>Rychlost</h2>
   Vaše stránky budou hotovy do 7 dnů,<br /> pokud nebude uvedeno jinak.
</div>
Odpovědět
29.7.2016 12:39
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Michal
Člen
Avatar
Michal:29.7.2016 12:45

Vlastnost line-height určuje výšku řádku. Pokud jej tedy nastavíš na 350px, znamená to, že se do kruhu o výšce 350px vejde pouze jeden řádek.
Zkus nastavit např:

.onas {
  line-height: 80px;
}
Editováno 29.7.2016 12:45
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět
29.7.2016 12:45
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Lava
Člen
Avatar
Lava:1.8.2016 8:50

Najlepšie je nenastavovať height a width, ale nastaviť okolo tvojho textu proste nejaký statický padding... tým zabezpečíš, že samotný text bude vždy umiestnený v strede zvislom a horizontálnom. Padding treba nastaviť väčší, inak ti vznikne odrezaný kruh.
napr.

<div class="kruh">
<div class="text">
Ahoj, tu je text

a tu je jeho druhý riadok
</div>
</div>

.kruh {
padding: 200px;
border-radius: 50%;
overflow:hidden; /*Možno nebude treba, závisí od zbytku tvojho kódu*/
background: #f00;
}

Nahoru Odpovědět
1.8.2016 8:50
Aspartám, sacharín, to je môj vitamín
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.