How to vertical align Div's elements [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the following HTML and CSS codes. The second row should be horizontal, but I don't understand why the second row is not horizontal. Please help me make the second row horizontal and align the elements of the tag vertically.
CSS
#kafel {
font-size:15px;
color: #358dd5;
font-weight:bold;
text-align: center;
display: table;
}
#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;
}
HTML
<h3>Studia 1 st</h3>
<div id="kafel">
<div id="kafel1">Socjologia</div>
<div id="kafel1">Kulturoznawstwo</div>
<div id="kafel1">Informatyka społeczna</div>
</div>
<h3>Socjologia 2st</h3>
<div id="kafel">
<div id="kafel2">E-gospodarka</div>
<div id="kafel2">Innowacje i interwencje społeczne</div>
<div id="kafel2">Multimedia i komunikacja społeczna</div>
</div>
<h3>Kulturoznawstwo 2st</h3>
<div id="kafel">
<div id="kafel3">Komunikacja wizualna i projektowanie graficzne</div>
<div id="kafel3">Ochrona dóbr natury i kultury</div>
<div id="kafel3">Projektowanie graficzne w kulturze nowych mediów</div>
</div>
The output has been pasted here.

Answer 1

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">
<div class="kafel1">Socjologia</div>
<div class="kafel1">Kulturoznawstwo</div>
<div class="kafel1">Informatyka społeczna</div>
</div>
<h3>Socjologia 2st</h3>
<div class="kafel">
<div class="kafel2">E-gospodarka</div>
<div class="kafel2">Innowacje i interwencje społeczne</div>
<div class="kafel2">Multimedia i komunikacja społeczna</div>
</div>
<h3>Kulturoznawstwo 2st</h3>
<div class="kafel">
<div class="kafel3">Komunikacja wizualna i projektowanie graficzne</div>
<div class="kafel3">Ochrona dóbr natury i kultury</div>
<div class="kafel3">Projektowanie graficzne w kulturze nowych mediów</div>
</div>

Answer 2

Is this what you are looking for ?
<h3>Studia 1 st</h3>
<div id="kafel">
<div id="kafel1">Socjologia</div>
<div id="kafel1">Kulturoznawstwo</div>
<div id="kafel1">Informatyka społeczna</div>
</div>
<h3>Socjologia 2st</h3>
<div id="kafel">
<div id="kafel2">E-gospodarka</div>
<div id="kafel2">Innowacje i interwencje społeczne</div>
<div id="kafel2">Multimedia i komunikacja społeczna</div>
</div>
<h3>Kulturoznawstwo 2st</h3>
<div id="kafel">
<div id="kafel3">Komunikacja wizualna i projektowanie graficzne</div>
<div id="kafel3">Ochrona dóbr natury i kultury</div>
<div id="kafel3">Projektowanie graficzne w kulturze nowych mediów</div>
</div>
#kafel {
font-size:15px;
color: #358dd5;
font-weight:bold;
text-align: center;
display: flex;
}
#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;
}
jsfiddle:- jsfiddle.net/6hcoejtn/2