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 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>
       
       
       
       
    • Por lindomar55
      ola amigos preciso de uma ajudinha, estou montando uma aplicaçao usando vb.net windows forms. nela tenho um botao onde chamo uma url no chrome com o seguinte comando.
      Private Sub Btn_abrir_site_Click(sender As Object, e As EventArgs) Handles Btn_abrir_site.Click
              Dim url As String = “https://www.rico.com.você/dashboard/tesouro-direto/“
              Process.Start(url)
          End Sub
      no google entao eu acesso com meu logim manualmente(prefiro assim). e em realizo uma serie de operaçoes, chega um determinado momento que preciso passar passar os dados que o site me apresenta entao(apos as operaçoes) para o aplicativo. ai é que esta o problema. neste ponto estou boiando.
      no codigo abaixo por exemplo: precisava obter os valores 12,36 e 8806,84 de forma automatica e colocar em textbox.
      vi exemplos na net que mostram com webbrowser porem eu prefiro que seja com o chrome. e nesses exemplos ele abre a pagina e ja obtem os dados. eu preciso trabalhar na pagina muiiiito e so depois baixar os dados programaticamente.
      qualquer ajuda sera bem vinda....
       

    • Por Kelly Ferracine
      Adcionei um relógio no site, mas quando atualizo a pagina ele some e logo aparece, isso ta causado problema, pois a div abaixo sobe fazendo ficando esquisito, alguém poderia me ajudar?? Agradeço a atenção
×

Informação importante

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