-1

Vamo lá, eu to tentando alinhar uma barra de pesquisa, só que eu não to sabendo fazer isso direito, faz um pouquim de tempo que não pego pra usar HTML com CSS, no momento ta assim

inserir a descrição da imagem aqui

E eu preciso que esse botão de pesquisa, fique na direita, só que no meio da div (em questão de alinhamento vertical)

O código em HTML da div ta assim

<body>
    <div class="principal">
        <div class="topo">
            <img src="IMGS/server-icon-1.png">
            <img src="IMGS/server-icon-1.png">
            <img src="IMGS/server-icon-1.png">
            <input type="text" class="pesquisar" name="pesquisar" placeholder="Pesquisar">
        </div>
    </div>    
</body>

E esse é o CSS

.topo{
    background-color: #4F4F4F;
    padding-top: 15px;
}

img{
    width: 99px;
    height: 99px;
    cursor: pointer;
}

.pesquisar{
    border-radius: 8px;
    border-style: none;
    width: 210px;
    height: 30px;
    margin-left: 470px;
    display: inline-block;
}

Tentei adicionar margin ou padding pra ver se mudava, não deu certo, tentei usar display: inline-block; também n deu certo. Alguém consegue me explicar o que que eu to fazendo de errado?

2 Respostas 2

0

Existem várias formas, uma delas é dar uma posição absoluta ao elemento, alterei o cSS:

.topo{
    background-color: #4F4F4F;
    padding-top: 15px;
    position: relative; /*para o input ter posição absoluta dentro da div e não da página*/
}

img{
    width: 99px;
    height: 99px;
    cursor: pointer;
}

.pesquisar{
    border-radius: 8px;
    border-style: none;
    width: 210px;
    height: 30px;
    position:absolute; /* add daqui */
    right:10px; /* margin da direita */
    top:50%; // margin de 50% do topo */
    transform:  translateY(-50%); /* desloca o elemento metade da própria altura para cima */
}
0

Victor, utilize flex-box é muito mais fácil. Tudo que eu fiz foi alterar as propriedades display e align-itens da classe topo e apagar a propriedade display da sua classe pesquisar.

   .topo {
        background-color: #4F4F4F;
        padding-top: 15px;
        display: flex;
        align-items: center;
    }

    img {
        width: 99px;
        height: 99px;
        cursor: pointer;
    }

    .pesquisar {
        border-radius: 8px;
        border-style: none;
        width: 210px;
        height: 30px;
        margin-left: 470px;                        
    }

Se quiser, dá uma olhada no vídeo que eu fiz essa semana bem curtinho falando um pouco sobre isso no youtube https://youtu.be/T1Rinm609vM

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .