problem z stylowaniem.

Question

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

Answer 1

Jeśli chodzi o ustawienie elementów, to najłatwiej mi jest używać flex'a. Jeśli nie wiesz czym jest flex, odsyłam do filmiku: https://www.youtube.com/watch?v=yFHgP0MF3V4 A gdy go zobaczysz, żeby oswoić się z samym flexem (i mieć "ściągę" właściwości css) polecam tę stronkę: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Problemem z Twoim pozycjonowaniem może leżeć w linijce 15 css "width: 50px". To może być zbyt mała szerokość i zawartość po prostu się nie mieści.

Answer 2

Przede wszystkim ustawiłeś długość w .mail .fb i tak dalej 50px, tam się nie mieści więc spada jedno pod drugie.

Poza tym ustawiłeś długość a.sociallink 105px, jak ma dobić do 105px jeśli znajduje się w divie który ma ustawione width 50px? 

Ja bym zrobił tak:

<div class="media">
        <h1>Kontakt</h1>
            <div class="square">
                    <div class="social">
                        <a href="#" target="_blank"><i class="icon-mail-alt"></i><span class="middle">E-mail</span></a>
                    </div>
                    <div class="social">
                        <a href="#" target="_blank"><i class="icon-facebook-rect-2"></i><span class="middle" id="xd">Facebook</span></a>
                    </div>
 
                    <div class="social">
                        <a href="" target="_blank"><i class="icon-linkedin-rect"></i><span class="middle">Linkedin</span></a>            
                    </div>
                    <div class="social">
                        <a href="" target="_blank"><i class="icon-paper-plane-1"></i><span class="middle">Formularz Kontaktowy</span></a>
                    </div>
            </div>        
        </div>

.media{
    background-color: #000;
    color: #FFF;
    height: 500px;
     
}
.media h1{
    font-size: 50px;
    text-align: center;
}
 
.square {
position:absolute;
left: 15px;
}

.social {
padding: 15px 0;
}

.social a
{
    display: flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
}

/* Długość i wysokość ikony */
.social i
{
   height: 50px;
   width: 50px;
   margin-right: 10px;
}