Centrralizar e Alinhar DIVS

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:

	 

	![imagem](https://forum.imasters.com.br/monthly_2019_12/Screenshot_5.jpg.33c21b6fe7451ead761aed6667d7f9d9.jpg)

	 

	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.

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>

>

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: 

  

 ![imagem](https://forum.imasters.com.br/monthly_2019_12/Screenshot_4.jpg.02df0063e331fc94103c4f0bf2bd108d.jpg)

  

 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(){}