Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera, alguém me ajuda a centralizar esse bendito search? Por algum motivo eu não estou conseguindo... Meu resultado é esse:
Esse é meu html:/monthly_2017_12/html5.png.ed9d8b8cb1f04a63f15799a9406dcff5.png" />
Esse é meu css: 
@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
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%;
}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;
} width: 20%;
border: 2px solid gray;
}Legal, eu não conhecia esse display: flex;
O que você adicionou foi isso?
#pesquisa {display: flex;
justify-content: center;
e #pesquisa input {
width: 20%;
border: 2px solid gray;
}
E você pode me explicar por que dessa forma ficará mais estável?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.
Passa o código tem texto...