Witam, mam pewien problem, mianowicie nie wiem jak wyśrodkować diva, w którym znajduje się tekst.
Div ten jest w jeszcze innym divie.
Wygląda to tak:
Chciałbym wyśrodkować tekst "Dowloand<br>Client 1,2 GB" tak aby był na środku zielonego elementu.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Neria.pl Prywatny serwer metin2.</title>
<meta name="description" content="Neria.pl Rozpocznij przygodę już dziś. Neria to najlepszy prywatny serwer metin2 w Polsce!">
<meta name="keywords" content="metin2, neria, neria.pl, rpg, mmo, najlepszy, prywatny, serwer, metin2, w, Polsce,">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Caudex:400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="justify">
<div id="menu">
<div id="rectangle-menu-1"><span class="tekst">Home</span></div>
<div class="rectangle-menu-2"><span class="tekst">Forum</span></div>
<div class="rectangle-menu-2"><span class="tekst">Register</span></div>
<div class="rectangle-menu-2"><span class="tekst"> Support</span></div>
<div class="rectangle-menu-3"><span class="tekst">ItemShop</span></div>
<div class="rectangle-menu-4"><span class="tekst"> Rankings</span></div>
<div class="rectangle-menu-4"><span class="tekst"> Contacts</span></div>
<div id="rectangle-menu-5"><span class="tekst">Events</span></div>
</div>
</div>
</div>
</body>
</html>
body{
font-family: 'Caudex', serif;
padding: 0 !important;
margin: 0 !important;
}
#wrapper{
background-image: url(img/background.jpg);
display: block;
width: 1920px;
height: 1189px;
}
#menu{
background-image: url(img/menu.png);
display: flex;
width: 1063px;
height: 84px;
line-height: 42px;
font-weight: 700;
font-size: 14px;
text-align: center
}
.tekst{
background-image: -webkit-gradient(linear,
left top, left bottom,
from(#c2b59b),
to(#817762));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
}
#justify{
display: flex;
justify-content: center;
}
#rectangle-menu-1{
display: block;
width: 70px;
height: 46px;
margin-left: 87px;
text-align: center;
float: left;
}
.rectangle-menu-2{
display: block;
width: 93px;
height: 46px;
text-align: center;
float: left;
}
.rectangle-menu-3{
margin-left: 197px;
display: block;
width: 86px;
height: 46px;
text-align: center;
float: left;
}
.rectangle-menu-4{
margin-left: 1px;
display: block;
width: 93px;
height: 46px;
text-align: center;
float: left;
}
#rectangle-menu-5{
margin-left: 1px;
display: block;
width: 70px;
height: 46px;
text-align: center;
float: left;
}
Prosił bym też o pomoc w wyłapaniu jakichś błędów, jestem jeszcze początkujący, także pewne rzeczy można było by zrobić w prostszy i szybszy sposób ;-)