CSS Como centralizar de forma responsiva uma caixa de texto em css

BRNMR · 2 de março de 2022

Sou iniciante em html/css e estou treinando um pouco, estou iniciando um esboço de sites de filmes e não estou conseguindo deixar uma caixa de texto centralizada no meio de uma div de forma responsiva, mas não estou conseguindo...

Se alguém puder dar uma olhada no código e me ajudar, segue o código:

<>

parte de html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="style.css">

    <title>Pagina inicial</title>

   

</head>

<body>



<div class="container">

    <div class="bloco1">

        <h1 class="texto1">Seja bem vindo ao Bflix</h1>

        <input type="text" class="busca" placeholder="Buscar..."/>



       

    </div>



</div>

</body>

</html>

parte de Css:

body{

    background-color: RGB(202, 201, 201);

}



.bloco1{

    background-color: RGB(49, 48, 48);

    height: 40%;

    width: 100%;

    display: flex;

    flex-direction: row;

}



.busca{



    border-radius: 6px;

    height: 2em;

    width: 30em;

    display: block;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 2%;

    margin-top: 2%;

    resize: none;

   

}

.texto1{

    color: azure;

    margin-left: 4%;

   

}

Quero centralizar aquele input no meio da div bloco1, porém no lado direito e de forma responsiva, se alguém puder ajudar...

Diego72Marinho · 17 de março de 2022

Se for pra deixar esse texto " " , centralizado a cima da input. Você deve modificar um pouquinho o style do "bloco1" . Ficaria assim :


.bloco1{



background-color: RGB(49, 48, 48);



height: 40%;



width: 100%;



display: flex;



flex-direction: column;



align-items: center;



}