Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:1.2.2014 13:02

Čus. Jak by se dalo vycentrovat span ve divu ? Gůglil jsem to no a ani jedna z možností, které mi tam psali nešla použít na můj příklad.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jan Demel</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href='http://fonts.googleapis.com/css?family=Hammersmith+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="header">
            <span>Jan Demel</span>
        </div>
        <div id="container">
        </div>
    </body>
</html>

CSS

html{
    height:100%;
}

body{
    height:100%;
    padding:0;
    margin:0;
}

#header{
    width:100%;
    min-height:100%;
    background-color:#0066FF;
    text-align:center;
}

#header span{
    color:white;
    font-size:70px;
    font-family: 'Hammersmith One', sans-serif;
    line-height: 100%;
    display: inline-block;
    vertical-align: middle;
}
Odpovědět 1.2.2014 13:02
To co se zdá být nemožné, je vždy možné.
Avatar
Marek Z.
Redaktor
Avatar
Marek Z.:1.2.2014 14:05

Tomu spanu musíš také určit velikost tedy:

#header span{
color:white;
font-size:70px;
font-family: 'Hammersmith One', sans-serif;
line-height: 100%;
display: inline-block;
vertical-align: middle;
width:100%;
text-align: center;

}

Editováno 1.2.2014 14:05
Nahoru Odpovědět 1.2.2014 14:05
Chybami se člověk učí, běžte se učit jinam!
Avatar
Jan Demel
Redaktor
Avatar
Odpovídá na Marek Z.
Jan Demel:1.2.2014 18:23

No ono to ale pořád nefunguje :(
http://demel.mablog.eu/web/

Nahoru Odpovědět 1.2.2014 18:23
To co se zdá být nemožné, je vždy možné.
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na Jan Demel
Marek Z.:1.2.2014 20:28

Já to vycentrované vidím.. Zkus smazat cache (ctrl+F5)

Nahoru Odpovědět 1.2.2014 20:28
Chybami se člověk učí, běžte se učit jinam!
Avatar
Odpovídá na Jan Demel
Michal Doubek (HAPPY DAY):1.2.2014 20:44

přesně je to vprostřed

Nahoru Odpovědět 1.2.2014 20:44
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Jan Demel
Redaktor
Avatar
Odpovídá na Marek Z.
Jan Demel:2.2.2014 9:39

Opravdu to přesně v prostřed té stránky není :D Je to jenom jakoby vycentrované nahoře. Používám Chrome, máte někdo něco jiného ?

Nahoru Odpovědět 2.2.2014 9:39
To co se zdá být nemožné, je vždy možné.
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na Jan Demel
Marek Z.:2.2.2014 11:48

Moje chyba, špatně jsem tě pochopil takže zkus toto:

#header {
width: 100%;
min-height: 100%;
background-color: #0066FF;
}

#header span {
color: white;
font-size: 70px;
font-family: 'Hammersmith One', sans-serif;
width: 100%;
text-align: center;
top: 50%;
position: absolute;
}

To už je na středu.. :D

Nahoru Odpovědět 2.2.2014 11:48
Chybami se člověk učí, běžte se učit jinam!
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na Marek Z.
Marek Z.:2.2.2014 11:49

U #header dej pryč zarovnání textu na střed, stačí když to bude jenom u toho spanu..

Nahoru Odpovědět 2.2.2014 11:49
Chybami se člověk učí, běžte se učit jinam!
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 8 zpráv z 8.