How do I align the input with the buttons - and +?

Asked

Viewed 70 times

0

.counter svg {
  
  left: 14.78%;
  right: 82.29%;
  
  bottom: 45.02%;
  fill: #2f3676;
  
}

.counter input {
  left: 10.04%;
  right: 85.77%;
  bottom: 45.02%;
  background: #DDE3E9;
  border: 1px solid #2F3676;
  border-radius: 4px;
  width: 60px;
  height: 42px;
<!DOCTYPE html>
<html lang="pt-br"> <!--parâmetro obrigatório-->

<head>
	<title>Teste Frontend VAGAS.com</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./styles.css">
</head>

<body >
	<div class="box">
		<div class="header">
			<div class="title">Formulário<br />para compra de<br /><strong>Pacote de Stickers</strong></div>
		</div>
		<div class="space"></div>
		<div class="form">
			<div class="space"></div>
			<div class="fieldset">
				<div class="label"><strong>Quais stickers:</strong></div>
				<div class="space"></div>
				<div><input type="checkbox" /> React</div>
				<div class="space"></div>
				<div><input type="checkbox" /> Vue</div>
				<div class="space"></div>
				<div><input type="checkbox" /> Angular</div>
			</div>
			<div class="space-md"></div>
			<div class="fieldset">
				<div class="label"><strong>Quantos stickers de cada?</strong> </div>
				<div class="space"></div>
				<div class="counter">
					<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42">
						<path d="M4.667 0A4.668 4.668 0 0 0 0 4.667v32.666A4.668 4.668 0 0 0 4.667 42h32.666A4.668 4.668 0 0 0 42 37.333V4.667A4.668 4.668 0 0 0 37.333 0H4.667zm28 23.333H9.333v-4.666h23.334v4.666z" /></svg>
					<input type="text"  placeholder="0"  />
					<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42">
						<path d="M4.667 42h32.666A4.668 4.668 0 0 0 42 37.333V4.667A4.668 4.668 0 0 0 37.333 0H4.667A4.668 4.668 0 0 0 0 4.667v32.666A4.668 4.668 0 0 0 4.667 42zm4.666-23.333h9.334V9.333h4.666v9.334h9.334v4.666h-9.334v9.334h-4.666v-9.334H9.333v-4.666z" /></svg>
				</div>
			</div>
			<div class="space-md"></div>
			<div class="fieldset">
				<div class="label"><strong>Observações:</strong></div>
				<div class="space"></div>
				<textarea id="descricao" placeholder="Alguma dúvida? Recado?"></textarea>
			</div>
			<div class="space-md"></div>
			

			<footer>
				<div id="res"><strong>Formulário enviado com sucesso!</strong></div>
				<button onclick="enviar()">ENVIAR</button>
				
			</footer>
		</div>
	</div>

	<script src="index.js"></script>
</body>

</html>

javascript css html5

1 answer

2


If you want to align the items vertically, I recommend using the display: flex in the parent element, as it aligns vertically within an element with display: block it’s not practical at all.

Despite the tip, I can’t explain why its layout has become so misaligned. It seems to be related to svg, but unfortunately I don’t know how to explain the cause.

.counter {
  display: flex;
  align-items: center;
}

.counter svg {
  left: 14.78%;
  right: 82.29%;
  
  bottom: 45.02%;
  fill: #2f3676;
}

.counter input {
  left: 10.04%;
  right: 85.77%;
  bottom: 45.02%;
  background: #DDE3E9;
  border: 1px solid #2F3676;
  border-radius: 4px;
  width: 60px;
  height: 42px;
  margin: 0 5px;
<!DOCTYPE html>
<html lang="pt-br">
<!--parâmetro obrigatório-->

<head>
  <title>Teste Frontend VAGAS.com</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <div class="box">
    <div class="header">
      <div class="title">Formulário<br />para compra de<br /><strong>Pacote de Stickers</strong></div>
    </div>
    <div class="space"></div>
    <div class="form">
      <div class="space"></div>
      <div class="fieldset">
        <div class="label"><strong>Quais stickers:</strong></div>
        <div class="space"></div>
        <div><input type="checkbox" /> React</div>
        <div class="space"></div>
        <div><input type="checkbox" /> Vue</div>
        <div class="space"></div>
        <div><input type="checkbox" /> Angular</div>
      </div>
      <div class="space-md"></div>
      <div class="fieldset">
        <div class="label"><strong>Quantos stickers de cada?</strong> </div>
        <div class="space"></div>
        <div class="counter">
          <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42">
            <path d="M4.667 0A4.668 4.668 0 0 0 0 4.667v32.666A4.668 4.668 0 0 0 4.667 42h32.666A4.668 4.668 0 0 0 42 37.333V4.667A4.668 4.668 0 0 0 37.333 0H4.667zm28 23.333H9.333v-4.666h23.334v4.666z" /></svg>
          <input type="text" placeholder="0" />
          <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42">
            <path d="M4.667 42h32.666A4.668 4.668 0 0 0 42 37.333V4.667A4.668 4.668 0 0 0 37.333 0H4.667A4.668 4.668 0 0 0 0 4.667v32.666A4.668 4.668 0 0 0 4.667 42zm4.666-23.333h9.334V9.333h4.666v9.334h9.334v4.666h-9.334v9.334h-4.666v-9.334H9.333v-4.666z" /></svg>
        </div>
      </div>
      <div class="space-md"></div>
      <div class="fieldset">
        <div class="label"><strong>Observações:</strong></div>
        <div class="space"></div>
        <textarea id="descricao" placeholder="Alguma dúvida? Recado?"></textarea>
      </div>
      <div class="space-md"></div>


      <footer>
        <div id="res"><strong>Formulário enviado com sucesso!</strong></div>
        <button onclick="enviar()">ENVIAR</button>

      </footer>
    </div>
  </div>

  <script src="index.js"></script>
</body>

</html>

  • It worked, thank you beast.

Browser other questions tagged javascript css html5

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