| Autor | Zpráva | ||
|---|---|---|---|
| Pringac Profil * |
#1 · Zasláno: 9. 7. 2015, 16:29:42
Ahoj, mohl by mi prosím někdo poradit jak bych mohl vertikálně zarovnat text na střed divu? Zkoušel jsem vertical-align: middle; ale nešlo to...
HTML: <html>
<head>
<title>StrangeR's Folder Selection</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="content">
<?php
$class = folder;
$dirs = array_filter(glob('*'), 'is_dir');
foreach ($dirs as $value) {
echo "<a href=".$value."><div class=".$class.">".$value." project</div></a>";
}
?>
</div>
</body>
</html>CSS: html, body {
padding: 0;
margin: 0;
}
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
@font-face {
font-family: opensans;
src: url("font.ttf");
}
#content {
margin-right: auto;
margin-left: auto;
width: 30%;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.folder {
margin-right: auto;
margin-left: auto;
width: 100%;
height: 7%;
background-color: #ecf0f1;
margin-top: 3%;
}
a {
text-decoration: none;
color: #34495e;
width: 30%;
font-family: opensans;
text-transform: uppercase;
}
a:hover {
color: #fff;
}
.folder:hover {
background-color: #e74c3c;
width: 101%;
margin-left: 1%;
}Živá ukázka: http://stranger.tk/ |
||
| Sennin Profil |
#2 · Zasláno: 9. 7. 2015, 18:46:42
Nazdar Pringac
Pridaj si do do Css-ka .folder -> padding: napr. 30px 0; či ti to vyhovuje samozrejme rozmery podľa potreby :D |
||
| petr Profil * |
#3 · Zasláno: 9. 7. 2015, 22:14:27
Úplně na 100% nevím, jestli je to tak správně, ale zatím mi fungovalo:
div {
position: relative;
display: table-cell;
vertical-align: middle;
/*klidně i text-align: center;*/
}img a všechny elementy s display: inline;), ale pro tento případ to stačí.
|
||
|
Časová prodleva: 9 let
|
|||
0