Entrar Ainda não tem acesso?
5
respostas

Centralizar objetos

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pixels? e atividade Nova página

por Alexander Bassani Amaral
| 169.3k xp | 96 posts
Eng. de Computação

bom dia, estou com duvida ao realizar o ultimo exercício da aula 1, com relação a posicionar os elementos,

Por exemplo estou tentando posicionar o botão do "veja mais" e "Conheça mais um pouco sobre mim" verticalmente no centro da página.

<section class="secao-inicio saudacao">
            <p class="saudacao"><span class="primeira-frase"><span class="saudacao-inicio">Olá,</span> meu nome é <strong class="header-nome">João da Silva</strong></span> <span class="saudacao-ultima-linha">e eu construo <em class="saudacao-final">sites maravilhosos</em></span></p>
            <a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
</section>
<section class="secao-inicio trabalhos">
            <h2 id="trabalhos-titulo">Trabalhos</h2>
            <ul id="img-trabalhos">
                <li><img src="img/bmw.png" alt="Site da BMW"></li>
                <li><img src="img/ibm.png" alt="Site da IBM"></li>
                <li><img src="img/uol.png" alt="Site da UOL"></li>
            </ul>
            <a class="botao-index" href="portfolio.html">Veja mais</a>
        </section>

no css tentei os seguintes meios:

.botao-index
{
    padding: 0.5%;
    margin-bottom: 4%;
    margin-top: 3%;
    text-align: center;
    vertical-align: middle;
    align-content: center;
    align-items: center;
    align-self: center;
    text-align-last: center;
}

mais nenhum dos align deu certo

Outro jeito que eu fiz foi colocando um margin com 37%. mais não posso dizer 100% que ele está centralizado

5 respostas
por Arthur Lara da Silva
| 139.6k xp | 7 posts

Não entendi... você está tentando alinhar no centro da página ou do box?

por Arthur Lara da Silva
| 139.6k xp | 7 posts

Tente não utilizar o valor em porcentagem, e quem sabe fique melhor alinhado! Por exemplo:

<div class="box">
    <button>veja mais</button>
</div>
.box {
    padding: 3em;
    background-color: #ccc;
}

.box button {
    display: block;
    margin: 0 auto;
}
por Vergara
| 53.4k xp | 18 posts

Respondi um post semelhante sobre alinhamento vertical que pode te ajudar

Alterando o display da div você consegue utilizar o vertical-align

Exemplo: https://jsfiddle.net/7ycshsc4/6/

por Alexander Bassani Amaral
| 169.3k xp | 96 posts
Eng. de Computação

Vergara, eu tentei o seu metodo. mais o qeu eu quero centralizar é um objeto dentro de um objeto, e não um texto dentro de um objeto. algo como isso:

<div class="box">
    <div class="hcenter">
    </div>    
</div>
*{margin:0; padding:0;}

.box{
  display:table;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.hcenter{
  display: relative;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

no caso, queria um método para deixar ele centralizado tanto verticalmente como horizontalmente, sem usar porcentagem

por Vergara
| 53.4k xp | 18 posts

Entendi, neste caso o melhor seria usar o flexbox.

.box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

Exemplo: https://jsfiddle.net/qwcocLr1/1/