Diskuze: Vertikální centrování

HTML a CSS HTML a CSS Vertikální centrování American English version English version

Avatar
nosekt
Člen
Avatar
nosekt:

Zdravim, za boha nemůžu přijít na to, jak udělat, aby byl odkaz se třídou .button vertikálně vycentrovaný v headeru. Dále se mi také nedaří udělat kód responzivní.. Prosím o radu

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
    <title>Tomas Nosek webdesign</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>




<body>

<header>
<nav>
  <div class="logo"></div>
  <ul>
  <li><a href="">About</a></li>
  <li><a href="">Products</a></li>
  <li><a href="">Team</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Contact</a></li>
  </ul>
</nav>


 <a href="" class="button">Kdo jsme?</a>


</header>


</body>


</html>

CSS:

body {
        margin : 0px;
}

html, body {

        height: 100%;
        width: 100%;
}

header{
background: url(header.jpg) no-repeat center;
background-size: cover;
width: 100%;
height: 700px;
text-align: center;
}

nav{
  width: auto;
  height: 80px;
}

.logo{
display: block;
float:left;
background: url(logo.png) no-repeat;
height: 64px;
width: 64px;
margin: 70px 130px auto;

}

nav ul{
margin: 0px auto;
margin-right: 100px;
list-style-type: none;
}

nav ul li {
float: right;
padding: 0px 20px;
margin: 0 5px;
margin-right: 50px;
font-size: 17px;
height: 73px;
line-height: 13em;

}

nav a {
color: #C3C2C4;
text-decoration: none;
font-family: Open Sans;
}

nav a:hover{
color: white;
}

.nadpis{
margin: auto;
color: white;
font-family: Open Sans;
text-align: center;
padding-top: 250px;
}


.button {
  font-family: Open Sans;
        font-size: 18px;
  color: white;
        text-align: center;
  border: 2px solid white;
        border-radius: 20px;
        height: 40px;
        width: 200px;
        margin: 0px auto;
        padding-top: 10px;
  display: block;
  }

   a{
  text-decoration: none;
  }
 
Odpovědět 20.5.2014 13:46
Avatar
raito
Člen
Avatar
raito:

Nezkoušel jsem tvůj kód ale já obecně centrování vertikálně řeším idealně třeba paddingem. Například: div o výšce 100px bude obsahovat div, který má výšku 20px, takže padding bude 40px.

Co se responsive týče: nastuduj si twitter bootstrap. I když se ti nelíbí a nechceš ho třebas používat: responsivita je tam imho dokonale vyřešená a hlavně perfektně popsaná v dokumentaci se všemi interaktivními ukázkami: www.getbootstrap.com. Já jsem se responsive docela dlouho učil, experimentoval jsem a napsal serm si vlastní "engine" abych pak zjistil, že jsem vlastně ten bootstrap vymejšlel znova a že to funguje na úplně stejnym principu.

Nahoru Odpovědět 22.5.2014 15:24
Asi sem usnul. Co se dělo posledních... 5 let?
Avatar
Michal Žůrek (misaz):

musíš mít element s nastaveným

display: tablle;

v tom musíš mít další element

display:table-cell;

a v tom button. teď nevím přesně jestli buttonu nebo té table-cell se nastavuje vertical-aligment.

Nahoru Odpovědět 22.5.2014 20:01
Nesnáším {}, proto se jim vyhýbám.
Avatar
chodnik74
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
chodnik74:

Přesně jak píšeš, akorát máš překlep.

Na obal, ve kterém budu centrovat nastavím

display: table;

a potom na vnitřním elementu nastavím:

display: table-cell;
vertical-align: middle;

Pokud ti nedělá problém angličtina, pak zde máš popsaných 6 metod na vertikální zarovnání: http://www.vanseodesign.com/…l-centering/

 
Nahoru Odpovědět 1.6.2014 11:44
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 4 zpráv z 4.