Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:

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

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

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

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

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

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.