Do nového roku jako lepší programátoři? Znovu otevíráme večerní školu programování. Nette framework, návrhové vzory, testování nebo vůbec poprvé kurzy ASP.NET dostupné odkudkoli v republice.

Diskuze: Centrování textu v divu

HTML a CSS HTML a CSS Centrování textu v divu American English version English version

Avatar
tbartolen
Člen
Avatar
tbartolen:

Zdar, mám div, a potřeboval bych vycentrovat text přesně do středu toho divu, nehledě na řádek...zkoušel jsem to přes padding a tak, ale víceméně bez úspěchu...je na to nějaký univerzální fígl? Díky

<div class=prvnirada>
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>

a css

a.vata {
        display:block;
        height: 100%;
        width: 100%;
        text-decoration: none;
}
.prvnirada {
        width: 30%;
        float: left;
        border: 1px solid black;
        background: url("pokus.jpg");
        height: 100px;
}
Editováno 18.5.2016 22:43
Odpovědět 18.5.2016 22:43
Navštiv www.fb.com/skkelticz
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět  +1 18.5.2016 22:47
Creating websites is awesome till you see the result in another browser ...
Avatar
tbartolen
Člen
Avatar
tbartolen:
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Nahoru Odpovědět 18.5.2016 22:54
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na Jiří Gracík
tbartolen:

Jo to taky, ale už jsem to našel viz hore :-) díky ! ;)

Nahoru Odpovědět 18.5.2016 22:54
Navštiv www.fb.com/skkelticz
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na tbartolen
Jiří Gracík:

To je naprosto zbytečný a složitý :)

Nahoru Odpovědět 19.5.2016 2:21
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Libor Šimo (libcosenior):

Ale ak má ten div väčšiu výšku, text-align: center rieši len horizontálny stred.

Nahoru Odpovědět 19.5.2016 7:10
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
adder
Člen
Avatar
adder:

Reseni pro verticalni i horizontalni smer centrovani:

a.vata {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.2;
        text-decoration: none;
}
.prvnirada {
        width: 30%;
        float: left;
        border: 1px solid black;
        background: url("pokus.jpg");
        height: 100px;
        text-align: center;
        lihe-height: 100px;
}
Nahoru Odpovědět 19.5.2016 8:26
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Libor Šimo (libcosenior)
Tomáš123:

Existuje aj vertical-align: middle a display: inline-block...

(Nevidel som nový príspevok.)

Editováno 19.5.2016 8:50
Nahoru Odpovědět  +1 19.5.2016 8:48
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
Jiří Gracík:

To je pravda, toho jsem si nevšimnul

Nahoru Odpovědět 20.5.2016 15:05
Creating websites is awesome till you see the result in another browser ...
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 9 zpráv z 9.