Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

posicionar button!

Oi, bom eu queria saber como eu fasso para colocar meu button no centro do textarea?Insira aqui a descrição dessa imagem para ajudar na acessibilidade`

Geovane
desenvolvedor front-end

    <nav class="menu-navegação">
        <a class="menu-link" href="#">About</a>
        <a class="menu-link" href="#">Projetos</a>
        <a class="menu-link" href="#">Skills</a>
        <a class="menu-link" href="#">Contatos</a>
    </nav>

</header>
<hr>
<main>
    <h2>
        About
    </h2>
    <div class="sobre">
        <p class="descrição">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na área
            e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu <br> trabalho ou bater um bom papo entre em contato logo abaixo!
        </p>
        <img src="escritório.png" alt="escritório">
    </div>
    <h3 class="Projetos">
        Projetos
    </h3>
    <p class="informações-de-projetos">
        Ops! Por enquanto não tenho nenhum projeto, mais está em construção!
    </p>
    <h4>
        Skills
    </h4>
    <div class="Skills">
        <img class="fotos" src="html.png" alt="">
        <img id="css" class="fotos" src="css.png" alt="">
        <img id="git" class="fotos" src="git.png" alt="">
        <img class="fotos" src="figma.png" alt="">
    </div>
    <h5 class="Contatos">
        Contatos
    </h5>

    <form action="">
        <div class="box-form">
            <div class="form">
                <div class="nome-sobrenome">
                    <label class="formulário" for="nome">Nome e Sobrenome</label>
                    <div class="nome-sobrenome-input">
                        <input class="formulário" type="text" placeholder="Nome e sobrenome">
                    </div>
                </div>
                <div class="e-mail">
                    <label class="formulário" for="e-mail">E-mail</label>
                    <div class="e-mail-input">
                        <input class="formulário" type="email" id="e-mail" placeholder="Exem:email@gmail.com">
                    </div>
                </div>
                <div class="numero">
                    <label class="formulário" for="numero">Numero</label>
                    <div class="numero-input">
                        <input class="formulário" type="tel" placeholder="Telefone">
                    </div>
                </div>
                <div class="assunto">
                    <label class="formulário" for="text">Assunto</label>
                    <div class="assunto-input">
                        <textarea class="formulário" name="" id="" cols="30" rows="10"></textarea>
                    </div>
                </div>
                <div class="enviar-button">
                    <button class="formulário">enviar</button>
                </div>

            </div>
            <div class="img-form">
                <img class="foto" src="formulário.jpg" alt="">
            </div>
        </div>
    </form>

</main>
`
5 respostas
header {
    display: flex;
    vertical-align: middle;
    justify-content: space-between;
    align-items: center;
    margin-right: 4%;
}

hr {
    width: 98%;
}

h1 {
    font-size: 40px;
    margin-left: 3%;
}

.sobre {
    display: flex;
    align-items: center;
}

h2 {
    color: #7d7dde;
    font-size: 57px;
    margin-left: 6%;
}

.Projetos {
    text-align: center;
    color: #7d7dde;
    font-size: 57px;
}

h4 {
    text-align: center;
    color: #7d7dde;
    font-size: 57px;
}

.Skills {
    text-align: center;
}

.Contatos {
    text-align: center;
    color: #7d7dde;
    font-size: 57px;
}

.fotos {
    margin-left: 110px;
}

#git {
    width: 180px;
}

p {
    text-align: center;
    font-size: 27px;
    margin-left: 50px;
}

.formulário {
    display: flex;
    margin-left: 230px;
    margin-top: 10px;
}

input {
    border-radius: 50px;
    border-color: #7d7dde;
}

textarea {
    border-radius: 10px;
    border-color: #7d7dde;
}

button {
    margin-right: 30px;
}

.box-form {
    display: flex;
}

.foto {
    width: 420px;
    margin-top: 10px;
    margin-left: 200px;
}

.espaço-titulo {
    margin-left: 40px;
}

.menu-link {
    margin-right: 20px;
    color: #BBBBBB;
    text-decoration: none;
    font-size: 210%;
}

.menu-link:hover {
    color: black;
}
solução!

Oi Geovane, tudo bem? Desculpe a demora para responder!

Vamos lá! Primeiramente, eu recomendo você tirar esse margin-left de 230px do seu formulário, é um valor muito alto e não é necessário, nós vamos ver como podemos fazer de uma outra forma sem que prejudique o alinhamento do botão.

Feito isso, agora no nosso botão, vamos tirar também esse margin-right e vamos colocar o seguinte código:

button {
    margin: 0 auto;
}

Isso vai fazer com que o botão tenha uma margem de 0 (ou seja, não terá margem) na vertical (em cima/embaixo), e na horizontal (direita/esquerda), ele dê uma margem automática, ou seja, ocupe todo o espaço disponível na horizontal. Portanto, fará com que ele fique centralizado em relação ao seu pai (que é o formulário).

Agora, voltando a uma possível solução da margin-left: 230px (note que, se deixarmos assim, o botão não será centralizado), podemos fazer da seguinte maneira:

.formulário {
    display: flex;
    margin-top: 10px;
    position: relative;
    left: 230px;
}

O position: relative; fará com que ele seja relativo em relação a ele mesmo. Isso significa que quando colocarmos o left: 230px;, ele irá deslocar-se um valor de 230px à sua esquerda. É um comportamento semelhante ao margin-left, porém uma prática melhor e com isso, o botão será centralizado.

Espero ter ajudado, bons estudos =)

Oi Giovanna beleza e você? Aqui um programador me respondeu nesse tópico assim! Insira aqui a descrição dessa imagem para ajudar na acessibilidade Não seria melhor?

Oi Geovane, tudo bem?

É uma outra forma de fazer sim, super válido! Não tinha me atentado a essa div que envolvia o button, mas realmente ficou mais simples!

Isso acontece porque a div com classe enviar-button é filha do formulario, então por padrão ela vai ter o tamanho total do seu pai (que é o formulário). Sendo isso, quando colocamos display: flex; e justify-content: center;, estamos colocando todos esses elementos dessa div (no caso, o botão), no centro. Por isso funciona!

Mas note que se colocarmos:

button {
    display: flex;
    justify-content: center;
}

Não irá funcionar, visto que é necessário uma div mesmo e um botão dentro dessa div.

Mas essa solução está perfeita, qualquer uma das duas é válida! Espero ter ajudado, bons estudos =)

obrigado! mais Giovanna você poderia me responder nesse dois tópicos?Porque ainda não consegui resolver o problema!https://cursos.alura.com.br/forum/topico-tirar-margin-inferior-169404

https://cursos.alura.com.br/forum/topico-aumentar-imagem-e-posicionar-lis-168537

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software