Centralize div container materialize

Question

Centralize div container materialize

Navigation

#1 by (4 votes)

2

I have the following structure in my HTML :

<div class="image">
    <div class="container center-align">
        <h1 class="grey-text text-lighten-5">Análise de Sistemas</h1>
        <span><b class="grey-text text-lighten-5">Tutoriais, Dicas, Tecnologia</b></span>
    </div>
</div>

The CSS of class image :

.image {
    background-image: url("../images/vingadores.jpg");
    min-height: 400px;
    overflow: hidden;
    align-content: center;
    margin-bottom: 15px;
}

As the image below the <div class="container center-align"> is not centralized, I would like it to be in the middle of the image which is the <div class="image"> div.

DoesanyonehaveanyideahowIcandothis?

IhavealreadylookedhereintheStack,andtheQ&Aoncenteringdivdidnothelpme.

OBS:I'musingFramework Materialize.

html css framework materialize

asked by anonymous 17.05.2015 / 00:43

1 answer

Routes - CodeIgniter How to make the tip of the "dialogue balloon"?

score 4 · Accepted Answer

There are several ways to centralize both a div and a div. In this case since we do not even know the height values nor the width value of any of the container or center-align classes we can use a trick that perfectly aligns this div without having to know its width or height .

Here's how this can be accomplished:

.center-align {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

By doing this,% w / w% will not be obeying% w /% and will simply get out of the% w /% class and obey% w /% instead. So we need to get her to obey the class <div class="image"> to make the text obey this class so that it stays inside it and not be going out of it. Then we will give parent div to it:

.image {
    background-image: url("../images/vingadores.jpg");
    min-height: 400px;
    overflow: hidden;
    text-align:center; /* Adicionalmente iremos mudar esta linha que antigamente era align-content: center; para podermos alinhar o texto ao centro */
    position: relative;
}

Here is an example below:

.center-align {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* código abaixo não relevante, só para o estilo! */
    color: #fff;
    background:#000;
    padding: 0 20px 10px 20px;
}
.image {
    min-height: 400px;
    overflow: hidden;
    text-align:center;
    position: relative;
    
    /* código abaixo não relevante, só para o estilo! */
    background: url(http://i.ytimg.com/vi/zeroxkAEKyM/maxresdefault.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<div class="image">
    <div class="container center-align">
        <h1 class="grey-text text-lighten-5">Análise de Sistemas</h1>
        <span><b class="grey-text text-lighten-5">Tutoriais, Dicas, Tecnologia</b></span>
    </div>
</div>