Diskuze: Kruh v CSS #2

pgarsky

Člen

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...

Michal

Člen

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č

Nahoru Odpovědět

29.7.2016 12:45

Lava

Člen

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.

Nejčastěji vyhledáváné

Diskuze: Kruh v CSS #2