Cześć mam pewien problem z wystylowaniem pewnych elementów na mojej stronie... próbowałem już wielu znanych mi metod lecz nic nie pomaga...
Mój kod wygląda tak:
<div class="media">
<h1>Kontakt</h1>
<div class="square">
<div class="mail">
<a href="#" target="_blank" class="sociallink"><i class="icon-mail-alt"></i><span class="middle">E-mail</span></a>
</div>
<div class="fb">
<a href="#" target="_blank" class="sociallink"><i class="icon-facebook-rect-2"></i><span class="middle" id="xd">Facebook</span></a>
</div>
<div class="Linkedin">
<a href="" target="_blank" class="sociallink"><i class="icon-linkedin-rect"></i><span class="middle">Linkedin</span></a>
</div>
<div class="form">
<a href="" target="_blank" class="sociallink"><i class="icon-paper-plane-1"></i><span class="middle">Formularz Kontaktowy</span></a>
</div>
<div style="clear:both;"></div>
</div>
<div class="square"></div>
</div>
a to mój css:
.media{
background-color: #000;
color: #FFF;
height: 500px;
}
.media>h1{
font-size: 50px;
text-align: center;
}
.mail
{
margin: 10px;
width: 50px;
height: 50px;
}
.fb
{
margin: 10px;
width: 50px;
height: 50px;
}
.Linkedin
{
margin: 10px;
width: 50px;
height: 50px;
}
.form
{
margin: 10px;
width: 50px;
height: 50px;
}
.square
{
width: 50%;
float: left;
}
a.sociallink
{
color: #ffffff;
text-decoration: none;
display: block;
width: 105px;
height: 142px;
}
efekt wygląda na chwilę obecną w ten sposób:
a chciałbym aby napisy wyglądały tak jak napis "e-mail", oraz był wyśrodkowany na wysokość. Niestety nie udało mi się uzyskać efektu którego pragnę.