2

Estou com problema em deixar essa div centralizada e responsive alguém poderiam e ajudar?

.ml{
	text-align: center;
	color:#3A89AF;
}
.ml p{
	text-align: center;
	color:#000;
}
.ml a{
	text-decoration: none;
	text-decoration-line: none;
}
.ml a:hover{
	color:#fff;
}
.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
	border-radius: 10px;
	font-family: 'Pacifico', cursive;
	font-size: 25px;
	color: #FFF;
	text-decoration: none;	
}

.blue
{
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	text-shadow: 0px -2px #2980B9;
}

.platina
{
	background-color: #00FF6C;
	border-bottom: 5px solid #0CAA45;
	text-shadow: 0px -2px #00FF6C;
}

.gold
{
	background-color: #E8FF00;
	border-bottom: 5px solid #A1AD21;
	text-shadow: 0px -2px #D8FF00;
}

.prata
{
	background-color: #969696;
	border-bottom: 5px solid #787575;
	text-shadow: 0px -2px #969696;
}
.bronze
{
	background-color: #986208;
	border-bottom: 5px solid #634514;
	text-shadow: 0px -2px #986208;
	margin-right: 60px;
}


.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}
	<div class="ml">
		<h2>Caso prefira o Mercado Livre</h2>
		<p>Trabalhamos com pagseguro e mercadolivre, caso você tenha interesse de comprar por mercado livre.</p>
	  <a href="#" class="action-button shadow animate blue">Diamante</a>
	  <a href="#" class="action-button shadow animate platina">Platina</a>
	  <a href="#" class="action-button shadow animate gold">Gold</a>
	  <a href="#" class="action-button shadow animate prata">Prata</a>
	  <a href="#" class="action-button shadow animate bronze">Bronze</a>
	</div>

2 Respostas 2

2

Basta tirar o float: left do .action-button (senão elementos vão para a esquerda), tirar o margin-right: 60px; de .bronze (senão ele faz um espaçamento na lateral direita de 60 pixels e impede a centralização) e alterar o margin do .action-button para margin: 5px; (todas as margens iguais, neste caso, é importante não apenas na centralização mas para o igual espaçamento de um botão ao outro):

inserir a descrição da imagem aqui

.ml{
	text-align: center;
	color:#3A89AF;
}
.ml p{
	text-align: center;
	color:#000;
}
.ml a{
	text-decoration: none;
	text-decoration-line: none;
}
.ml a:hover{
	color:#fff;
}
.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
   margin: 5px;
	border-radius: 10px;
	font-family: 'Pacifico', cursive;
	font-size: 25px;
	color: #FFF;
	text-decoration: none;	
   display: inline-block;
}

.blue
{
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	text-shadow: 0px -2px #2980B9;
}

.platina
{
	background-color: #00FF6C;
	border-bottom: 5px solid #0CAA45;
	text-shadow: 0px -2px #00FF6C;
}

.gold
{
	background-color: #E8FF00;
	border-bottom: 5px solid #A1AD21;
	text-shadow: 0px -2px #D8FF00;
}

.prata
{
	background-color: #969696;
	border-bottom: 5px solid #787575;
	text-shadow: 0px -2px #969696;
}
.bronze
{
	background-color: #986208;
	border-bottom: 5px solid #634514;
	text-shadow: 0px -2px #986208;
}


.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}
<div class="ml">
   <h2>Caso prefira o Mercado Livre</h2>
   <p>Trabalhamos com pagseguro e mercadolivre, caso você tenha interesse de comprar por mercado livre.</p>
   <a href="#" class="action-button shadow animate blue">Diamante</a>
   <a href="#" class="action-button shadow animate platina">Platina</a>
   <a href="#" class="action-button shadow animate gold">Gold</a>
   <a href="#" class="action-button shadow animate prata">Prata</a>
   <a href="#" class="action-button shadow animate bronze">Bronze</a>
</div>

1

Na classe .ml a adicione os seguintes atributos:

display:inline-block;
float:none;

.ml{
	text-align: center;
	color:#3A89AF;
  min-width:100%;
  margin:auto;

}
.ml p{
	text-align: center;
	color:#000;
}
.ml a{
	text-decoration: none;
	text-decoration-line: none;
    display:inline-block;
    float:none;

}
.ml a:hover{
	color:#fff;
}
.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
	border-radius: 10px;
	font-family: 'Pacifico', cursive;
	font-size: 25px;
	color: #FFF;
	text-decoration: none;	
}

.blue
{
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	text-shadow: 0px -2px #2980B9;
}

.platina
{
	background-color: #00FF6C;
	border-bottom: 5px solid #0CAA45;
	text-shadow: 0px -2px #00FF6C;
}

.gold
{
	background-color: #E8FF00;
	border-bottom: 5px solid #A1AD21;
	text-shadow: 0px -2px #D8FF00;
}

.prata
{
	background-color: #969696;
	border-bottom: 5px solid #787575;
	text-shadow: 0px -2px #969696;
}
.bronze
{
	background-color: #986208;
	border-bottom: 5px solid #634514;
	text-shadow: 0px -2px #986208;
	margin-right: 60px;
}


.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}
<div class="ml">
		<h2>Caso prefira o Mercado Livre</h2>
		<p>Trabalhamos com pagseguro e mercadolivre, caso você tenha interesse de comprar por mercado livre.</p>
    
	  <a href="#" class="action-button shadow animate blue">Diamante</a>
	  <a href="#" class="action-button shadow animate platina">Platina</a>
	  <a href="#" class="action-button shadow animate gold">Gold</a>
	  <a href="#" class="action-button shadow animate prata">Prata</a>
	  <a href="#" class="action-button shadow animate bronze">Bronze</a>

</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .