Aligning button to center does not work

Asked

Viewed 47 times

0

I have the page below,

http://www.hotplateprensas.com.br/gasmuriae

On the right side of the page index php., has a botão piece your gas.

To the click on, there’s gonna be a formulário to fill in address data.

At the end of form, has a button what desire centralize.

But nothing I do works.

I already put in:

  margin: auto !important;
  text_align: ceter !important;

Nothing works.

@charset "utf-8";
/* CSS Document */

img {
	border: 0;
	max-width: 100%;
}

label {
	line-height: 40px;
	display: inline-block;
	vertical-align: middle;
}

select {
	width: 110px;
	height: 50px;
}

.typeTextGrande, .typeTextMedio, .typeTextPequeno {
	height: 36px;
	padding: 9px;
}

.typeTextPequeno {
	width: 150px;
}

.typeTextMedio {
	width: 250px;
}

.typeTextGrande {
	width: 450px;
}

.labelPequeno {
	width: 100px;
}

.labelMedio {
	width: 200px;
}

.labelGrande {
	width: 300px;
}

.h1Centralizado, .h1CentralizadoAvisos {
	width: 100%;
	line-height: 50px;
	text-align: center;
}

button.btnPecaGas {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	width: 208px;
	height: 44px;
}


button.btnPecaGas {
	background-image: url(../../_img/botijao.png);
}



div.sessoes {
	width:1000px;
	margin: auto;
	position: relative;
}

.encomende {
	cursor:pointer;
}

div.pecaGas {
	width:40px;
	background-color: rgb (255,0,0);	
	z-index:10;
}

div.pecaGas div.gas {
	display:block;
	position:absolute;
	top:0;
	right:0;	
}

div.peca {
    position: relative;
	display:block;
	width:420px;
	top:calc(50% - 270px);
	right:0;	
	background-color:rgb(255,255,255);
	border: .5px rgb(255,0,0) solid;	
   -webkit-border-radius: 20px 0 0 20px;
   -moz-border-radius: 20px 0 0 20px;
    border-radius: 20px 0 0 20px;	
	z-index:10;   
	padding:20px 0 20px 20px;
}

div.peca input, div.peca select {
	width: 250px  !important;;
	border: 1px rgb(255,0,0) solid;
}

div.peca button.fechaPeca {
	position:absolute;
	top:20px;
	right:20px;
	background-color:transparent !important;
}

div.peca button.btnPecaGas {
	margin:auto  !important;
	text-align:center !important;
}

div.peca .labelPequeno {
	width:120px !important;
}
<div class="peca">
  <button class="fechaPeca"><img src="_img/btn-close.png" /></button>
  <h1 class="h1Centralizado">Peça suas botijas</h1>
  <label for="nomePeca" class="labelPequeno">Nome</label>
  <input type="text" name="nomePeca" id="nomePeca" class="typeTextPequeno" placeholder="Nome"  required />
  <br />
  <br />
  <label for="enderecoPeca" class="labelPequeno">Endereço</label>
  <input type="text" name="enderecoPeca" id="enderecoPeca" class="typeTextPequeno" placeholder="Endereço completo" required  />
  <br />
  <br />
  <label for="bairroPeca" class="labelPequeno">Bairro</label>
  <select name="bairroPeca" class="typeTextPequeno" required>
    <option value="">Selecione o bairro</option>
  </select>
  <br />
  <br />
  <label for="telefonePeca" class="labelPequeno">Telefone</label>
  <input type="text" name="telefonePeca" id="telefonePeca" class="typeTextPequeno" placeholder="Telefone"  />
  <br />
  <br />
  <label for="quantidadePeca" class="labelPequeno">Quantas botijas?</label>
  <input type="text" name="quantidadePeca" id="quantidadePeca" class="typeTextPequeno" placeholder="Quantas Botijas"  />
  <br />
  <br />
  <button class="btnPecaGas">Peça já o seu</button>
</div>

I wonder where I’m going wrong?

css3

  • I think this solves: https://answall.com/questions/252417/centralizes%C3%A7%C3%A3o-de-bot%C3%A3o-incorrect/252419#252419

  • you can explain why this failure?

  • It can be many factors... depends a lot on the CSS involved in the context... something else, usually a margin: 0 auto; works with display: block; without float: left;.

  • ah ok, you did not get to see the code of the link I passed no. It was by inference.. But thanks. I will observe! I only passed the link because there might be some CSS conflict that I’m not able to see.

  • I saw it once, but now it won’t open.

  • @Carlosrocha how his link didn’t work did a generic response centering the content on a div using flex-box.

  • Here for me gave normal. maybe at the time Voce tried I was still upando

  • I added to the question the code I’m using.

  • I edited the answer and finally added your code with the adjustments

Show 4 more comments

1 answer

2


Utilize Flex-Box, to organize the layout, in case I used only 3 lines to center the button.

Start flex - display: flex;

display: flex; // para startar o flex

align-items: [flex-start] [flex-end] [center] [stretch]

align-items: center; //para alinhar ao centro

Justify-content: [flex-start] [flex-end] [center] [space-between] [space-Around] [space-Evenly]

justify-content: center; //para justificar o conteúdo


.component {
  width: 200px;
  height: 200px;
  background-color: #bdc3c7;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}

.btn {
  width: 80px;
  height: 35px;
  padding: 10px;
  background-color: #27ae60;  
  color: white;
}

.btn:hover {
  color: #ecf0f1;
  background-color: #2ecc71;
}
<div class="component">
    <button class="btn">Button</button>
</div>

Below I reedited your code by adding the flex-box for that I put the button in a div with the class="btn" and in class btn added the flex-box

@charset "utf-8";
/* CSS Document */

img {
	border: 0;
	max-width: 100%;
}

label {
	line-height: 40px;
	display: inline-block;
	vertical-align: middle;
}

select {
	width: 110px;
	height: 50px;
}

.typeTextGrande, .typeTextMedio, .typeTextPequeno {
	height: 36px;
	padding: 9px;
}

.typeTextPequeno {
	width: 150px;
}

.typeTextMedio {
	width: 250px;
}

.typeTextGrande {
	width: 450px;
}

.labelPequeno {
	width: 100px;
}

.labelMedio {
	width: 200px;
}

.labelGrande {
	width: 300px;
}

.h1Centralizado, .h1CentralizadoAvisos {
	width: 100%;
	line-height: 50px;
	text-align: center;
}

button.btnPecaGas {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	width: 208px;
	height: 44px;
}


button.btnPecaGas {
	background-image: url(../../_img/botijao.png);
}



div.sessoes {
	width:1000px;
	margin: auto;
	position: relative;
}

.encomende {
	cursor:pointer;
}

div.pecaGas {
	width:40px;
	background-color: rgb (255,0,0);	
	z-index:10;
}

div.pecaGas div.gas {
	display:block;
	position:absolute;
	top:0;
	right:0;	
}

div.peca {
	display:block;
	width:420px;
	top:calc(50% - 270px);
	right:0;	
	background-color:rgb(255,255,255);
	border: .5px rgb(255,0,0) solid;	
   -webkit-border-radius: 20px 0 0 20px;
   -moz-border-radius: 20px 0 0 20px;
    border-radius: 20px 0 0 20px;	
	z-index:10;   
	padding:20px 0 20px 20px;
}

div.peca input, div.peca select {
	width: 250px  !important;;
	border: 1px rgb(255,0,0) solid;
}

div.peca button.fechaPeca {
	position:absolute;
	top:20px;
	right:20px;
	background-color:transparent !important;
}

div.peca button.btnPecaGas {
	margin:auto  !important;
	text-align:center !important;
}

div.peca .labelPequeno {
	width:120px !important;
}

.btn{
display: flex;
  align-items: center;
  justify-content: center;
}
<div class="peca">
  <button class="fechaPeca"><img src="_img/btn-close.png" /></button>
  <h1 class="h1Centralizado">Peça suas botijas</h1>
  <label for="nomePeca" class="labelPequeno">Nome</label>
  <input type="text" name="nomePeca" id="nomePeca" class="typeTextPequeno" placeholder="Nome"  required />
  <br />
  <br />
  <label for="enderecoPeca" class="labelPequeno">Endereço</label>
  <input type="text" name="enderecoPeca" id="enderecoPeca" class="typeTextPequeno" placeholder="Endereço completo" required  />
  <br />
  <br />
  <label for="bairroPeca" class="labelPequeno">Bairro</label>
  <select name="bairroPeca" class="typeTextPequeno" required>
    <option value="">Selecione o bairro</option>
  </select>
  <br />
  <br />
  <label for="telefonePeca" class="labelPequeno">Telefone</label>
  <input type="text" name="telefonePeca" id="telefonePeca" class="typeTextPequeno" placeholder="Telefone"  />
  <br />
  <br />
  <label for="quantidadePeca" class="labelPequeno">Quantas botijas?</label>
  <input type="text" name="quantidadePeca" id="quantidadePeca" class="typeTextPequeno" placeholder="Quantas Botijas"  />
  <br />
  <br />
  <div class="btn">
  <button class="btnPecaGas">Peça já o seu</button>
  </div>
</div>

  • Just to be sure: You just put the button inside a div.btn and styled it with display: flex keeping the straight of the code intácto?

  • Yes that’s right @Carlosrocha, if you read the documentation I’m sure you’ll start using flex-box

  • 1

    but is there any explanation for margin auto and text-align: center not working? Text-align is fine because it is a button but margin: auto

  • 1

    There are several things that can make the margin: 0 auto not work, there can be a reset in the main css *{ ... } that resets what is between { } in all elements, or it may be that there is another call from the same class that already defines the margin with other values and subwrite the previous one, in its css there are many calls to the element div try just calling the class of the element and the subclass you want to subscribe to.

  • And rest easy to wear flex-box the same is native to the css3 is not a plugin as I’ve seen some people comment.

  • It worked, It solved your problem?

  • Yeah, but can I be a little boring? Is there any way you can explain why the button doesn’t want to center the way I did it being that it’s the default shape?

  • @Carlosrocha, I put your code in the jsfiddle, and I checked that you were inserting text-align in class peca and changed the padding for 20px on both sides so it could be centralized, see your code here, but consider seeing about the flex-box

  • Yes, but what I would like is for only the button to be centered. The form does not!

Show 4 more comments

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.