Objetos não ficam alinhados no CSS da página

Estevan Silveira · Janeiro 18, 2023

Preciso que esses dois objeto(input, e button) fiquem centralizados juntos, e também preciso diminuir o botão e aumentar na horizontal a caixa de pesquisa. Já tentei de todos os tipos mas nenhum deu certo.

<?php
session_start();
    
include_once('../php/php_config/config.php');

    if((!isset($_SESSION['email']) == true) and (!isset($_SESSION['senha']) == true)){
      unset($_SESSION['email']);
      unset($_SESSION['senha']);
      header('Location:tela_login.php');
    }
    $autenticado = $_SESSION['email'];

    if(!empty($_GET['search'])){
      $data = $_GET['search'];
      $sql = "SELECT * FROM produto WHERE 
      nome LIKE '%$data' 
      or estado LIKE '%$data' 
      or cidade LIKE '%$data'
      or tipo LIKE '%$data' ORDER BY nome ASC";
    }
    else{
      $sql = "SELECT * FROM produto ORDER BY nome ASC";
    }

    $result = $conexao->query($sql);

?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../style/tela_menuPrincipal.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="icon" type="image/png" href="../imgs/LOGO_SEM_NOME-removebg-preview-_1_.ico"/>
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap"
      rel="stylesheet"
    />
    
    <title>Dótis - Menu - Instituição</title>
  </head>
  <body>
  <style>
      td, th{
        padding: .7em;
        margin: 0;
        border: 1px solid #ccc;
        text-align:center;
      }
      table{
        width: 100%;
        margin-bottom: .5em;
        text-align: center;
        color: rgb(146, 19, 146);
        padding: 20px;
        padding-left: 50px;
        padding-right: 50px;
      }
      h2{
        text-align: center;
        color: rgb(146, 19, 146);
      }
      .box-search{
        justify-content: center;
        display:inline-block;
        gap: 1%;
        text-align: center;
        
      }
      .box-search.pesquisar{
        text-align: center;
      }
  </style>
    <header>
      <h1>Dótis - Plataforma de auxílio em doações</h1>
    </header>
    <nav>
      <ul>
        <li><a href = "logout.php">Sair</a></li>
    </nav>
    <br>
    <h2 >Produtos</h2>
    <br>
    <div class="box-search">
        <input type="search" class="form-control" placeholder="Pesquisar" id="pesquisar">
        <button onclick = "searchData()">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>
    </button>
    </div>
      <div>
        <table class = table>
          <thead>
            <tr>
              <th scope="col">Nome</th>
              <th scope="col">Descrição</th>
              <th scope="col">Estado</th>
              <th scope="col">Cidade</th>
              <th scope="col">Tipo</th>
              <th scope="col">---</th>
            </tr>
          </thead>
          <tbody>
            <?php
                while($user_data = mysqli_fetch_assoc($result))
                {
                  echo "<tr color='black'>";
                  echo "<td>".$user_data['nome']."</td>";
                  echo "<td>".$user_data['descricao']."</td>";
                  echo "<td>".$user_data['estado']."</td>";
                  echo "<td>".$user_data['cidade']."</td>";
                  echo "<td>".$user_data['tipo']."</td>";
                  echo "</tr>";
                    }
            ?>
          </tbody>
        </table>
      </div>
    </div>
    <script src="" crossorigin="anonyumous"></script>
    <footer>
      <li><a href="../php/tela_sac.php"><u>Contate-nos!</u></a></li>
    </footer>
  </body>
  <script>
    var search = document.getElementById('pesquisar');

    search.addEventListener("keydown", function(event){
      if(event.key === "Enter"){
        searchData();
      }

    });

    function searchData(){
      window.location = 'tela_menuInst.php?search='+search.value;
    }
  </script>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
nav {
  background-color: rgb(146, 19, 146);
  padding: 10px;
  height: 30px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 55px;
}

header {
  background-color: rgb(146, 19, 146);
  padding: 10px;
  text-align: center;
  color: white;
}

ul {
  text-align: center;
  list-style: none;
  padding: 10px;
  margin: 0px;
}

li {
  display: inline;
  padding: 8px 16px;
}

li a {
  text-decoration: none;
  color: white;
  padding: 8px 16px;
}

li a:hover {
  background-color: rgb(117, 3, 117);
  color: white;
}

footer {
  font-size: 12px;
  background-color: rgb(146, 19, 146);
  padding: 10px;
  text-align: center;
  color: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: rgb(146, 19, 146);
  background-color: rgb(252, 249, 249);
}

Entrar

Objetos não ficam alinhados no CSS da página

Pergunta

Estevan Silveira

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades