I'm having trouble leaving this div centralized and responsive

Question

I'm having trouble leaving this div centralized and responsive

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I am having trouble in leaving this div centralized and responsive could someone help?

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

html css

asked by anonymous 16.01.2018 / 02:31

2 answers

Check if a string is a number and check if it is a special character What's the difference in using ModelAndView and ResponseEntity?

score 2 · Answer 1

Just take the% w / o of% w / o% (otherwise elements go to the left), take% w / o% w / o% (otherwise it makes a right side spacing of 60 pixels and prevents centering) (all margins equal, in this case, it is important not only in centralization but for equal spacing from one button to the other):

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

score 1 · Answer 2

In class .ml a add the following attributes:

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>