Alinhamento dentro de button.

PedroNunes · Março 22, 2018

Olá, estou com um problema para alinhar os nomes das redes sociais dentro desse button, tentei com padding, margin, coloquei em display block, inline e nada, ou não funciona ou meche com os ícones <i> também, aparentemente parece algo bem simples mas não consegui identificar a solução. Estou tentando deixar semelhante à imagem. É apenas um site para um trabalho de um curso que estou fazendo. Sou estou estudando desenvolvimento web a pouco tempo e ainda fico meio perdido em meio a coisas simples. Desde já agradeço.

<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
	<title>Portfolio | Pedro Nunes</title>
</head>

<!--HEADER + NAV-->
<body>
	<header>
		<h1><a href="#one">PedroNunes</a></h1>
		<nav>
			<ul>
				<li><a href="#two">About</a></li>
				<li><a href="#tree">Portfolio</a></li>
				<li><a href="#four">Contact</a></li>
			</ul>
		</nav>
	</header>

	<!--IMAGES-->
	<div class="img">
		<div id="one">
			<img src="https://i.imgur.com/gkfc9m4.jpg" alt="">
			<section>
				<button class="btn1"><i class="fab fa-github-square fa-2x"></i><a href="https://github.com/pedronuness" target="_blank"> GitHub</a></button>
				<button class="btn2"><i class="fab fa-facebook fa-2x"></i><a href="https://www.facebook.com/pedronuness10"> Facebook</a></button>
				<button class="btn3"><i class="fab fa-twitter-square fa-2x"></i><a href="https://twitter.com/Vector2500"> Twitter</a></button>
			</section>
		</div>

		<div id="two">
			<img src="https://i.imgur.com/A9rXfSU.jpg" alt="">
			<section>
				<h2>Hi, I'm Pedro</h2>
				<p>Hello, I'm So-and-so, I'm 19 and working with front-end development for 2 years. I am currently in the second year of the Information Systems course.
				My specialties include developing websites with HTML5, CSS3 and JavaScript. check my top jobs in my portfolio ou get in touch with me if you want to hire my services.</p>
			</section>
		</div>

		<div id="tree">
			<img src="https://i.imgur.com/22kB3E8.jpg" alt="">
			<section>
				<a href="https://github.com/pedronuness/projeto_google_glass" target="_blank"><img id="img1" src="https://i.imgur.com/iDsRVO3.png" alt=""></a>
				
				<a href="https://pedronuness.github.io/projeto_mirror_fashion/" target="_blank"><img id="img2" src="https://i.imgur.com/EpIkQnB.png" alt=""></a>
				
				<a href="https://pedronuness.github.io/projeto_noteshop/" target="_blank"><img id="img3" src="https://i.imgur.com/wNbk1we.png" alt=""></a>
				
				<a href="https://pedronuness.github.io/projeto_patas/" target="_blank"><img id="img4" src="https://i.imgur.com/0IyMlK2.png" alt=""></a>
			</section>
		</div>

		<div id="four">
			<img src="https://i.imgur.com/GwocD46.jpg" alt="">
			<h3>pedronuness10@gmail.com</h3>
			<section>				
				<button class="btn1"><a href="https://github.com/pedronuness" target="_blank">GitHub</a></button>
				<button class="btn2"><a href="https://www.facebook.com/pedronuness10" target="_blank">Facebook</a></button>
				<button class="btn3"><a href="https://twitter.com/Vector2500" target="_blank">Twitter</a></button>
			</section>
		</div>
	</div>
	
	<!--FOOTER-->
	<footer>
		<p>&copy; All rights reserved - 2018</p>
	</footer>
	
</body>
</html>

/*----------ALL----------*/
body{
	background-color: rgba(100, 100, 100, 0.69);
	margin: 0px 0 0 0;
	padding: 0;
	list-style: none;
	font-family: monospace;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}
img{margin-top: -2px;}
a{text-decoration: none;}

/*----------HEADER----------*/
header{
	background: rgba(211, 211, 211, 0.88);
	width: 100%;	
	height: 50px;
	position: fixed;
	border-bottom: 2px solid;
	z-index: 1;
}
header h1{
	border-left: 2px solid;
	float: left;
	margin: 0 0 0 30px; 
	padding: 7px;
	word-spacing: -10px;
}
header a{
	color: #000;
}
header nav{
	float: right;
	margin: 0px 41px 0 0;
}
header nav ul li{
	display: inline-block;
	list-style: none;
}
header nav ul li a{
	background-color: rgba(100, 100, 100, 0.69);
	color: #fff;	
	text-transform: uppercase;
	padding: 16px 30px;
	border-right: 2px solid #000000;
	border-left: 2px solid #000000;
	margin-right: -6px;
}
header nav ul li a:hover{
	background-color: #191919;
}

/*----------CONTENT----------*/
div img{
	border: 2px solid;
	margin-top: -6px;
	box-sizing: border-box;	
}
div.img a{
	color: #fff;
}
/*-----------Primeira Imagem----------*/
div#one img{
	width: 100%;	
}
div#one section button{
	position: absolute;
	border: 2px solid #fff;
	width: 160px;
	height: 50px;
	cursor: pointer;
	font-size: 20px;	
	background-color: rgba(100, 100, 100, 0.69);
}
div#one section button i{
	color: rgba(0, 0, 0, 0.79);
}
div#one section button:hover{
	background-color: #191919;
}
div#one button.btn1{
	margin: -300px 0 0 400px;
}
div#one button.btn2{
	margin: -300px 0 0 600px;	
}
div#one button.btn3{
	margin: -300px 0 0 800px;	
}

/*----------Segunda Imagem----------*/
div#two img{
	margin-left: 30px; /*margin: o auto não funcionou*/
}
div#two section{
	border: 2px solid;
	width: 380px;
	height: 400px;
	position: absolute;
	margin: -550px 150px;
	background-color: rgba(100, 100, 100, 0.95);
	padding: 20px;
	line-height: 25px;
	
}
div#two section h2{
	color: #fff;
}
div#two section p{
	color: #fff;
}

/*Terceira Imagem*/
div#tree img{
	margin-left: 30px;
}
div#tree section a img{
	border: 2px solid black;
	position: absolute;	
}
div#tree section #img1{
	margin: -800px 70px;
}
div#tree section #img2{
	margin: -800px 730px;
	
}
div#tree section #img3{
	margin: -400px 70px;
}
div#tree section #img4{
	margin: -400px 730px;
}

/*Quarta Imagem*/
div#four img{
	margin-left: 30px;
}
div#four h3{
	position: absolute;
	margin: -350px 150px;
	font-size: 25px;
}
div#four section{
	position: absolute;
	margin: -250px 150px;
}
div#four section button{
	position: absolute;
	border: 2px solid #fff;
	width: 120px;
	height: 50px;
	cursor: pointer;
	font-size: 20px;	
	background-color: rgba(100, 100, 100, 0.69);
}
div#four section button:hover{
	background-color: #191919;
}
div#four button.btn1{
	margin: -70px 0 0 700px;
}
div#four button.btn2{
	margin: 30px 0 0 700px;	
}
div#four button.btn3{
	margin: 130px 0 0 700px;	
}

/*----------FOOTER----------*/
footer{
	width: 100%;
	background-image: url(https://i.imgur.com/hwYMH6L.png);
	height: 60px;
	border: 2px solid;
	box-sizing: border-box;
	margin-top: -6px;
}
footer p{
	margin-left: 15px;
}

dougtop · Março 22, 2018

Boa tarde Pedro,

Eu fiz umas mudanças na sua estruruta html para facilitar a estilização, mude isso no html:

<section>
  <div class="area-btns">
    <a href="https://github.com/pedronuness" target="_blank"><i class="fab fa-github-square fa-2x"></i>GitHub</a>
    <a href="https://www.facebook.com/pedronuness10"><i class="fab fa-facebook fa-2x"></i>Facebook</a>
    <a href="https://twitter.com/Vector2500"><i class="fab fa-twitter-square fa-2x"></i>Twitter</a>
  </div>
</section>

E isso no css:

/*-----------Primeira Imagem----------*/

div#one img{width: 100%;}

.area-btns{
	margin: -300px 0 0 400px;
	position: absolute;
	display: flex;
}

.area-btns a{
	display: flex;
    align-items: center;
	margin-right: 40px;
	border: 2px solid #fff;
	width: 150px;
	height: 50px;
	cursor: pointer;
	padding: 0 10px;
	font-size: 20px;	
	background-color: rgba(100, 100, 100, 0.69);
}
.area-btns a i{
	float: left;
	margin-right: 15px;
	color: rgba(0, 0, 0, 0.79);
}
.area-btns a:hover{background-color: #191919;}
.area-btns a:hover i{color: #fff;}

/*----------Segunda Imagem----------*/

Testa aí e veja se ficou do jeito que gostaria...

Para fazer dessa forma mais simples, não teve jeito, precisei mudar a sua estrutura html :/

Com essas modificações, está ficando assim no meu:

Qualquer dúvida, fico à disposição ;)

PedroNunes · Março 22, 2018

Resolveu o problema, havia apenas visto algumas coisas sobre display flex mas não sabia de fato como poderia usá-lo, vou pesquisar mais sobre.

Obrigado :thumbsup:

Maujor · Março 23, 2018

Sem alterar marcação defina as margens dos botões com uso de porcentagem.

div#one button.btn1{
	margin: -30% 0 0 20%;
}
div#one button.btn2{
	margin: -30% 0 0 40%;	
}
div#one button.btn3{
	margin: -30% 0 0 60%;	
}

dougtop · Março 23, 2018

@PedroNunes Tinham várias formas de fazer o que você queria, usei o display flex porque além de ser uma propriedade mais moderna, estou tentando me acostumar a usa-lo para pegar prática rs.

Dava até para usa-lo de forma mais extensiva nesse seu exemplo, mas basicamente usei para alinhar os elementos do botão na vertical. ;)

:wink:

Entrar

Arquivado

Alinhamento dentro de button.

Recommended Posts

PedroNunes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dougtop 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

PedroNunes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

dougtop 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante