Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Centralizar conteúdo

por Bruno Lindoso
| 113.7k xp | 12 posts
Desenvolvedor de Chatbot Pleno

Boa noite!

Terminei o curso de HTML, CSS e JavaScript - praticando com as tecnologias da web mas decidi incrementar um pouco mais o layout para treinar meus conhecimentos front-end. Mas me debati com um problema básico de CSS: posicionamento.

Gostaria de acrescentar uma imagem à esquerda do formulário .newCard do exercício e centralizar o restante do conteúdo (textarea + submit). Segue o código HTML:

<body>
  <header class="header container">
    <h1 class="header-title">StickMe</h1>
    <nav class="header-menu">
      <ul>
        <li class="header-button">
          <a href="#">Linhas</a>
        </li>
        <li class="header-button">
          <a href="#">?</a>
        </li>
      </ul>
    </nav>
  </header>

  <form action="#" class="newCard">
    <img class="newCard-icon" src="images/stickme.ico" alt="Brand Icon">
    <textarea class="newCard-content" name="" id="" cols="30" rows="10" placeholder="Digite aqui o conteúdo de seu card"></textarea>
    <button class="newCard-action" type="submit">Salvar</button>
  </form>

  <section class="container">
...

O CSS:

.newCard {
  margin-bottom: 40px;
  background-color: #DDDDDD;
  padding: 24px 127px;
}
.newCard-content {
  display: inline-block;
  width: 560px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 10px;
  border: 2px solid #BBBBBB;
  border-radius: 4px;
  transition: width 0.6s, height 0.4s;
}
.newCard-content:hover {
  border-color: #AAAAAA;
}
.newCard-content:focus {
  border-color: #888888;
  width: 620px;
  height: 46px;
  font-size: 14px;
  transition: width 0.8s, height 0.5s ease;
}
.newCard-action {
  display: block;
  cursor: pointer;
  font-size: 16px;
  width: 84px;
  height: 34px;
  background-color: #8272C7;
  margin-left: auto;
  margin-right: auto;
}
.newCard-icon {
  float: left;
  width: 128px;
  height: 128px;
}

No exercício da vídeo-aula foi utilizado o margin-left/right: auto para alinhar os elementos textarea e button, mas nitidamente após colocar a imagem, não funciona mais. Tentei colocar float: left na imagem, mas ainda assim não obtive sucesso.

Alguma dica?

Obrigado!

3 respostas
por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Olá, Bruno.

A técnica de utilizar o margin-left: auto; acompanhada de margin-right: auto só deixa o elemento centralizado se ele for um elemento com o valor de display: block e com uma largura definida width: 560px;.

Olhando seu HTML eu entendi que você está querendo colocar a imagem do lado do <textarea> e deixar a imagem mais o <textarea> centralizados, e o <button> abaixo deles e também centralizado. Se for isso precisamos mudar alguns comportamento. Vamos lá :-)

No HTML não precisamos mudar nada. O nosso CSS fica assim:

Obs. vou colocar comentários no código explicando o que estou fazendo.

.newCard {
  margin-bottom: 40px;
  background-color: #DDDDDD;
  padding: 24px 127px;
  text-align: center; /* está propriedade alinha todos os textos que estão dentro do form e qualquer filho que tenho o valor do display como inline-block */
}
.newCard-content {
  display: inline-block;
  width: 560px;
  height: 24px;
  margin-bottom: 20px;
  padding: 10px;
  border: 2px solid #BBBBBB;
  border-radius: 4px;
  transition: width 0.6s, height 0.4s;
}
.newCard-content:hover {
  border-color: #AAAAAA;
}
.newCard-content:focus {
  border-color: #888888;
  width: 620px;
  height: 46px;
  font-size: 14px;
  transition: width 0.8s, height 0.5s ease;
}
.newCard-action {
  display: block;
  cursor: pointer;
  font-size: 16px;
  width: 84px;
  height: 34px;
  background-color: #8272C7;
  margin-left: auto;
  margin-right: auto;
}
.newCard-icon {
  display: inline-block; /* retirado o float e adicionado o display com o valor inline-block no lugar */
  width: 128px;
  height: 128px;
}

Coloca esse código e vê se acontece o que você estava querendo. Talvez a imagem não esteja alinhada verticalmente como você quer, se você quiser mudar o alinhamento vertical da imagem é só adicionar a propriedade vertical-align no seletor .newCard com o valor de top, middle ou bottom.

Se ficar muito diferente do que você está querendo mando um print de como você quer que eu te ajudo.

Se ficar alguma dúvida é só falar :-)

solução!
por Bruno Lindoso
| 113.7k xp | 12 posts
Desenvolvedor de Chatbot Pleno

Fala Marco Bruno!

Show, funcionou direitinho. Tive que alinhar um pouco mais a imagem e o textarea mas obtive o efeito que queria.

Abraços

por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Aí sim Bruno. Precisando só postar dúvidas no Forum. :-)