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

Como separar elementos da div pelo espaço entre seus centros?

por Vinícius Gabriel dos Santos
| 30.8k xp | 3 posts

Olá! Sou novo no frontend e estou com a seguinte dúvida: Tenho uma div que contém 3 elementos, um texto ao centro e botões nas extremidades. Quero deixar o texto centralizado com a página, porém os botões são de tamanhos diferentes, então o space-between acaba não funcionando exatamente como preciso. Coloquei no codepen.io um exemplo ilustrativo deste problema: https://codepen.io/viniciusgabriels/pen/YzNgaxO

Pensei como soluções criar uma margem para o botão menor compensando o tamanho para que fiquem iguais, ou ainda colocar os botões dentro de divs de tamanho fixo e alinhar cada um para o seu canto, mas ambas soluções me parecem gambiarra e pouco re-utilizável.

Então pensei se existe uma forma de fazer um "space-between-centers", uma separação que levaria em conta o espaço entre o centro dos itens filhos e não suas "bordas"?

Imagino ser um problema comum que os mais experientes já devam ter passado, não quero re-inventar a roda, mas gostaria muito de não utilizar o grid do Bootstrap nesta solução. Alguém poderia dar uma ideia?

#CSS

2 respostas
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Vinícius, tudo bem?

Vi seu código no CodePen e para modificar o <h2> que você deseja, será necessário primeiramente mencioná-lo no arquivo CSS, dessa forma: 

h2 {
}

Em seguida, para basear um elemento de acordo com o posicionamento da página, será necessário acrescentar o position: absolute e também utilizaremos o width: 100% para que o mesmo preencha por inteiro o tamanho horizontal da página, veja a seguir:

h2 {
  position:absolute;
  width:100%;
}

Além disso, será preciso colocar o text-align:center para centralizar o texto h2, pois o padrão é o text-align:start (o texto ficaria no canto esquerdo).

h2 {
  width:100%;
  position:absolute;
  text-align:center;
}

E por último, utilizaremos o margin:auto para posicionar o h2 verticalmente de forma correta de acordo com o .container

No final, assim ficou o elemento h2:

h2 {
  width: 100%;
  position:absolute;
  text-align:center;
  margin:auto;
}

Espero ter esclarecido, bons estudos!

por Vinícius Gabriel dos Santos
| 30.8k xp | 3 posts

O margin:auto não funcionou tão bem, acredito que pelo position:absolute, mas fazendo alguns ajustes no container resolveu, e no meu caso real acredito que ajustando o margin:top vai ficar topzera com a sua solução! Valeu Beatriz!!