Align search bar vertically to image

Asked

Viewed 84 times

-1

Come on, I’m trying to line up a search bar, only I don’t know how to do it right, it’s been a while since I got to use HTML with CSS, at the moment ta like this

inserir a descrição da imagem aqui

And I need this search button to be on the right, only in the middle of the div (in the case of vertical alignment)

The HTML code of the div ta thus

<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>

And this is the 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;
}

I tried to add margin or padding to see if it changed, it didn’t work, I tried to use display: inline-block; also did not work. Someone can explain to me what I’m doing wrong?

html css

2 answers

0

There are several ways, one of them is to give an absolute position to the element, I changed the 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, using flex-box is much easier. All I did was change the display and align-items properties of the top class and delete the display property of your search class.

   .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;                        
    }

If you want, take a look at the video I made this week very short talking a little bit about it on youtube https://youtu.be/T1Rinm609vM

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.