Marcin Królikowski Marcin Królikowski - 6 months ago 14
CSS Question

How to vertical align Div's elements

I have code like this .



Why the second row is not horizontal

Answer

You can't use same id multiple times in a single web page. Use class instead.

Use .kafel a {display: inline-block;} with some other properties as mentioned below and this problem will be solved.

body {
 background: #ccc;
}
.kafel {
   color: #358dd5;
   text-align: center;
   letter-spacing: -4px;
   font-size: 0;
}

.kafel a {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  font-weight:bold;
  font-size:15px;
}

.kafel1 {
  width:183px;
  height:183px;
  margin-right:20px !important;
  margin-bottom:20px;
  background-color:#f1f1f1;
  vertical-align: middle !important;
  display: table-cell !important;
  border:10px solid white;
  padding-left: 2%;
  padding-right: 2%; 
}

.kafel1:hover {
  color:#fff;
  background-color:#358dd5;	
}

.kafel2 {
  width:183px;
  height:183px;
  margin-right:20px !important;
  margin-bottom:20px;
  background-color:red;
  vertical-align: middle;
  display:table-cell;
  border:10px solid white;
  padding-left: 2%;
  padding-right: 2%;
}

.kafel2:hover {
  color: #fff;
  background-color: #358dd5;
}

.kafel3 {
  width:183px;
  height:183px;
  margin-right:20px !important;
  margin-bottom:20px;
  background-color:green;
  vertical-align: middle !important;
  display: table-cell !important;
  border:10px solid white;
  padding-left: 2%;
  padding-right: 2%;
}

.kafel3:hover {
  color:#fff;
  background-color:#358dd5;
}
<h3>Studia 1 st</h3>

<div class="kafel">
    <a href="http://localhost/WH/"><div class="kafel1">Socjologia</div></a>
    <a href="http://localhost/WH/"><div class="kafel1">Kulturoznawstwo</div></a>
    <a href="http://localhost/WH/"><div class="kafel1">Informatyka społeczna</div></a>
</div>

<h3>Socjologia 2st</h3>
<div class="kafel">
    <a href="http://localhost/WH/"><div class="kafel2">E-gospodarka</div></a>
    <a href="http://localhost/WH/"><div class="kafel2">Innowacje i interwencje społeczne</div></a>
    <a href="http://localhost/WH/"><div class="kafel2">Multimedia i komunikacja społeczna</div></a>
</div>

<h3>Kulturoznawstwo 2st</h3>
<div class="kafel">
    <a href="http://localhost/WH/"><div class="kafel3">Komunikacja wizualna i projektowanie graficzne</div></a>
    <a href="http://localhost/WH/"><div class="kafel3">Ochrona dóbr natury i kultury</div></a>
    <a href="http://localhost/WH/"><div class="kafel3">Projektowanie graficzne w kulturze nowych mediów</div></a>
</div>

Comments