Ir para conteúdo
Renan Leite

Não consigo centralizar input search

Recommended Posts

Fala galera, alguém me ajuda a centralizar esse bendito search? Por algum motivo eu não estou conseguindo... Meu resultado é esse: 

 

navegacaoideal.thumb.png.62f5e736aab0cde9adbf7d43df58038c.png

 

 

Esse é meu html:html5.png.ed9d8b8cb1f04a63f15799a9406dcff5.png

 

Esse é meu css: css.png.be4dd448c770358f1e17ea0246e9e262.png

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Aphrodi Olá, eu consegui alinhar... Mas não sei se da forma correta rs

Você ou alguém sugere algo?

A barra em laranja é só para mostrar onde fica a #area

navegacao_pronta.thumb.png.30e772a51e63cbda45bbc5c6baf547b5.png

 

HTML:

<body>

	<div id="navegacao">
		<div id="area">
			<div id="logo">
				<img src="img/logo.png">
			</div>				
			<div id="pesquisa">
				<input type="search" name="buscar" placeholder="Buscar no site...">
			</div>
		</div>		
	</div>


</body>

 

CSS: 

* {
	margin: 0;
	padding: 0;
}

#navegacao {
	width: 100%;
	height: 58px;
	background: blue;		
}

#area {
	width: 80%;	
	margin: 0 auto;	
	position: relative;
	border: 3px solid orange;
}

#logo {

	display: inline-block;
	width: 20%;	
	float: left;
	margin-left: -20px;
}

#pesquisa {	
	position: absolute;
	width: 20%;		
	border: 2px solid gray;	
	float: left;
	margin-left: 40%;
	top: 16px;		
}

#pesquisa input {
	width: 100%;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dependendo do que está fazendo, se for um site profissional, o código ta bem "instável" 

 

Tentei fazer o melhor sem alterar muita coisa:

	* {
	margin: 0;
	padding: 0;
}

#navegacao {
	width: 100%;
	height: 58px;
	background: blue;		
}

#area {
	width: 80%;	
	margin: 0 auto;	
	position: relative;
	border: 3px solid orange;
}

#logo {

	display: inline-block;
	width: 20%;	
	float: left;
	margin-left: -20px;
}

#pesquisa {
    position: absolute;
    width: 100%;
    top: 16px;
    display: flex;
    justify-content: center;
}
#pesquisa input {
    width: 20%;
    border: 2px solid gray;
}

 

  • Gostei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Legal, eu não conhecia esse display: flex;

O que você adicionou foi isso?

#pesquisa {
width: 100%
display: flex;
justify-content: center;

 

#pesquisa input {
    width: 20%;
    border: 2px solid gray;
}

 

E você pode me explicar por que dessa forma ficará mais estável? 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Depende do que você quer fazer e do que irá ser centralizado, fiz meio que uma gambiarra na real.

 

Display Flex - Exibe um elemento como um contêiner flex de nível de bloco.

justify-content - Alinha o conteúdo do elemento

 

É utilizado no css para alinhar os itens para trabalhar melhor o responsivo.

 

 

Esse código fica mais estável, pois não utiliza um numero determinado pelo criador do site(Pixel ou porcentagem) e sim da resolução.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por isaque_cb2
      Olá! eu estava aqui fazendo meu site, quando me deparei com o problema de fazer um menu "bonito" baixei este template depois de ver o exemplo na net, mas ele é muito complicado pra mim, não sou profissional (mas sou programador iniciante em c#)
      TEMPLATE
      mas se alguém puder me ajudar a criar uma pagina deste tipo, sem tantos códigos, eu agradeço, pois do jeito que está eu não consigo nem alterar as cores...
      pode ser com tutoriais, dicas, videos, etc...
       
      ~Grato desde já~
    • Por matheusmacias
      Alguém sabe resolver isso?

    • Por fabioseco
      Ola pessoal, meu dw cs6 não tem as tags de css flexbox.
      Alguém sabe como adiciona-las no dw cs6???
    • Por Solo
      Boa noite  pessoal, estou com um problema, sou iniciante me php e estou em duvida com como posso fazer uma paginacao de produtos do banco de dados...... alguem poderia me ajudar ou me indicar um tutorial ???
       
      <?php
      error_reporting(0);
      ini_set(“display_errors”, 0 );
      require_once("conexao.php"); 
         $produtos = "SELECT produto_ID, nome_produto, imagem_produto, valor ";
          $produtos .= "FROM produto ";
          $resultado = mysqli_query($conecta, $produtos);
          if(!$resultado) {
              die("Falha na consulta ao banco");   
          }
      ?> 
       
       
       
      AONDE LISTA OS PRODUTOS 
       
       
       
          <div class="rowproducts">
          <div id="listagem_produtos2" class="">
            <?php while($linha=mysqli_fetch_assoc($resultado)) {   ?>
                       
                      <ul>
                          <div class="class22">
                          
                          <li>
                              
                              <img  class="img-responsive"  height="200" width="200" src="<?php echo $linha["imagem_produto"]?> "  >
                              </li>
                              
                              <li class="nproduto"><?php echo $linha["nome_produto"]?></li>
                               <li class="nproduto">R$ <?php echo $linha["valor"]?></li>
                          </div>
                          </ul>
                          
                          
                          
                          
                          
                          
                          
                      
                  <?php } ?>
                      
                      
                      
                    </div>
                    </div>
       
       
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.