Diskuze: Kruh v CSS #2

HTML a CSS Webdesign Kruh v CSS #2 American English version English version

Avatar
pgarsky
Člen
Avatar
pgarsky:

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. července 12:39
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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. července 12:45
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět  +4 29. července 12:45
Avatar
Mego
Člen
Avatar
Mego:

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 1. srpna 8:50
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
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.