Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
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í
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
29.7.2016 12:45
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 <br>
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.