Centrralizar e Alinhar DIVS

[higordiasz 0]

Boa Tarde,

Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.

 

Segue meu código CSS responsável pelas div.

 

.col-100 {
    width: 100%;
    float: left;
    position: relative;
}

.principal-text {
    background-color: #424242;
}

.ul-softwares {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: left;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-bancodedados {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-mobile {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-redeestruturada {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: right;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.principal-text ul li {
    margin: auto;
    text-align: center;
}

.uls-principal {
    text-align: center;
}

.li-img {
    padding-top: 6px;
}

.uls-principal div {
    display: inline-block;
    width: 180;
    padding-right: 20px;
}

Abaixo meu código HTML:

 

<div class="col-100 principal-text">
        <main class="uls-principal">
            <div class="div-prog">
                <ul class="ul-softwares">
                    <li class="li-img"><img src="./img/programacao.png"></li>
                    <li>
                        <h1>Softwares</h1>
                    </li>
                    <li>
                        <p>Possuimos diversos Softwares
                            para a sua empresa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-bd">
                <ul class="ul-bancodedados">
                    <li class="li-img"><img src="./img/bancodedados.png"></li>
                    <li>
                        <h1>Banco de Dados</h1>
                    </li>
                    <li>
                        <p>Organimazanos todos seus dados e
                            configuramos oque precisa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-mobile">
                <ul class="ul-mobile">
                    <li class="li-img"><img src="./img/mobile.png"></li>
                    <li>
                        <h1>Desenvol. Mobile</h1>
                    </li>
                    <li>
                        <p>Fazemos o aplicativo ideal para a sua Empresa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-rede">
                <ul class="ul-redeestruturada">
                    <li class="li-img"><img src="./img/rede.png"></li>
                    <li>
                        <h1>Estrutura de Rede</h1>
                    </li>
                    <li>
                        <p>Fazemos toda o mapiamento da
                            rede e implantação.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
        </main>
    </div>

Print das DIV: 

 

 

Alguem sabe oq posso alterar para alinhar elas corretamente ? 

[higordiasz 0]

Opa ... eu consegui arrumar trocando as DIV por table ... segue o meu codigo .. caso possa ajudar alguem.

 

HTML

<table class="tabela">
                <tr>
                    <th>
                        <ul class="ul-softwares">
                            <li class="li-img"><img src="./img/programacao.png"></li>
                            <li>
                                <h1 class="title-ul">Softwares</h1>
                            </li>
                            <li class="li-p">
                                <p class="text-ul">Possuimos diversos Softwares
                                    para a sua empresa.</p>
                            </li class="li-p">
                            <li class="li-bt"><button class="bt-geral bt-prog">Saiba Mais</button></li class="li-bt">
                        </ul>
                    </th>
                    <th>
                        <ul class="ul-bancodedados">
                            <li class="li-img"><img src="./img/bancodedados.png"></li>
                            <li>
                                <h1 class="title-ul">Banco de Dados</h1>
                            </li>
                            <li class="li-p">
                                <p class="text-ul">Organimazanos todos seus dados e
                                    configuramos oque precisa.</p>
                            </li class="li-p">
                            <li class="li-bt"><button class="bt-geral bt-bd">Saiba Mais</button></li class="li-bt">
                        </ul>
                    </th>
                    <th>
                        <ul class="ul-mobile">
                            <li class="li-img"><img src="./img/mobile.png"></li>
                            <li>
                                <h1 class="title-ul">Desenvol. Mobile</h1>
                            </li>
                            <li class="li-p">
                                <p class="text-ul">Fazemos o aplicativo ideal para a sua Empresa.</p>
                            </li class="li-p">
                            <li class="li-bt"><button class="bt-geral bt-mobile">Saiba Mais</button></li class="li-bt">
                        </ul>
                    </th>
                    <th>
                        <ul class="ul-redeestruturada">
                            <li class="li-img"><img src="./img/rede.png"></li>
                            <li>
                                <h1 class="title-ul">Estrutura de Rede</h1>
                            </li>
                            <li class="li-p">
                                <p class="text-ul">Fazemos toda o mapiamento da
                                    rede e implantação.</p>
                            </li>
                            <li class="li-bt"><button class="bt-geral bt-rede">Saiba Mais</button></li>
                        </ul>
                    </th>
                </tr>
            </table>

CSS : 

.ul-softwares {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: left;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-bancodedados {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-mobile {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-redeestruturada {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: right;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.principal-text ul li {
    margin: auto;
    text-align: center;
}

.uls-principal table {
    text-align: center;
    align-content: center;
}

.li-img {
    padding-top: 6px;
}

.tabela tr th {
    padding-left: 10px;
    width: 180px;
    text-align: center;
}

.tabela tbody {
    align-self: center;
    text-align: center;
}

.tabela {
    width: 100%;
    margin: 0 auto;
}

.title-ul {
    color: #00bac6;
    font-size: 25px;
}

.text-ul {
    color: #ffffff;
}

.bt-geral {
    vertical-align: bottom;
    margin-top: 15%;
    border: 1px solid #00bac6;
    border-radius: 15px;
    color: #ffffff;
    background-color: #373737;
    padding: 4px;
}

.bt-geral:hover {
    background-color: #00bac6;
    color: black;
    border: 1px solid #000000;
    cursor: pointer;
}

.li-bt {
    height: 20%;
}

.li-p {
    height: 20%;
}

Resultado:

 

 

Acrescentei no button que quando acontece o hover ele muda a cor do background da letra e da borda. E deixei a classe separada para cada button para poder pegar no JS caso necessario. caso alguem queira melhorar o codigo, ficaria agradecido. E nois.

[Omar~ 87]

CSS

* {margin:0; padding:0}

.centralizar_internos {
    text-align: center
}

.coluna {
    display: inline-block; /* Isso irá alinhar lado a lado */
    vertical-align: top; /* Isso irá alinhar ao topo */
    margin: 0 10px; /* margem de zero ao cima e baixo e 10px esquerda e direita */
    width: 250px; /* Tamanho fixo para melhor responsabilidade */
    height: 350px;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737
}

/* Alterando características em telas cujo a resolução máxima é 600 pixels */
@media (max-width: 600px) {
    .coluna {
        margin: 0; /* Removendo as margens */
        width: 98% /* Definindo nova largura */
    }
}

 

HTML

<div class="centralizar_internos">

    <div class="coluna">
        <img src="./img/programacao.png" alt="a propiedade 'alt' é obrigatório em imagens!!!" />
        <h1>Softwares</h1>
        <p>Possuimos diversos Softwares
            para a sua empresa.</p>
    </div>

    <div class="coluna">
        <img src="./img/bancodedados.png" alt="a propiedade 'alt' é obrigatório em imagens!!!" />
        <h1>Banco de Dados</h1>
        <p>Organimazanos todos seus dados e
            configuramos oque precisa.</p>
    </div>

    <div class="coluna">
        <img src="./img/mobile.png" alt="a propiedade 'alt' é obrigatório em imagens!!!" />
        <h1>Desenvol. Mobile</h1>
        <p>Fazemos o aplicativo ideal para a sua Empresa.</p>
    </div>

    <div class="coluna">
        <img src="./img/rede.png"  alt="a propiedade 'alt' é obrigatório em imagens!!!" />
        <h1>Estrutura de Rede</h1>
        <p>Fazemos toda o mapiamento da
            rede e implantação.</p>
    </div>

</div>

 

[williamadm 0]

Em 31/12/2019 at 12:58, higordiasz disse:

Boa Tarde,

Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.

 

Segue meu código CSS responsável pelas div.

 

.col-100 {
    width: 100%;
    float: left;
    position: relative;
}

.principal-text {
    background-color: #424242;
}

.ul-softwares {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: left;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-bancodedados {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-mobile {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.ul-redeestruturada {
    list-style-type: none;
    display: inline-block;
    height: 350;
    width: 90%;
    float: right;
    border: 2px solid #656565;
    border-radius: 15px;
    background-color: #373737;
    margin: 0 auto;
}

.principal-text ul li {
    margin: auto;
    text-align: center;
}

.uls-principal {
    text-align: center;
}

.li-img {
    padding-top: 6px;
}

.uls-principal div {
    display: inline-block;
    width: 180;
    padding-right: 20px;
}

Abaixo meu código HTML:

 

<div class="col-100 principal-text">
        <main class="uls-principal">
            <div class="div-prog">
                <ul class="ul-softwares">
                    <li class="li-img"><img src="./img/programacao.png"></li>
                    <li>
                        <h1>Softwares</h1>
                    </li>
                    <li>
                        <p>Possuimos diversos Softwares
                            para a sua empresa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-bd">
                <ul class="ul-bancodedados">
                    <li class="li-img"><img src="./img/bancodedados.png"></li>
                    <li>
                        <h1>Banco de Dados</h1>
                    </li>
                    <li>
                        <p>Organimazanos todos seus dados e
                            configuramos oque precisa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-mobile">
                <ul class="ul-mobile">
                    <li class="li-img"><img src="./img/mobile.png"></li>
                    <li>
                        <h1>Desenvol. Mobile</h1>
                    </li>
                    <li>
                        <p>Fazemos o aplicativo ideal para a sua Empresa.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
            <div class="div-rede">
                <ul class="ul-redeestruturada">
                    <li class="li-img"><img src="./img/rede.png"></li>
                    <li>
                        <h1>Estrutura de Rede</h1>
                    </li>
                    <li>
                        <p>Fazemos toda o mapiamento da
                            rede e implantação.</p>
                    </li>
                    <li></li>
                </ul>
            </div>
        </main>
    </div>

Print das DIV: 

 

 

Alguem sabe oq posso alterar para alinhar elas corretamente ? 

Table fica complicado para responsável, mas eu resolvi meu problema, 

Primeiro verificar um height para todos que caiba os elementos.

Coloque <br/> antes e no término das div ou linhas <hr>

Cuidado pois pode ficar espaços desiguais entre eles para outras @media screen and(){}