如何垂直對齊Div的元素

Question

我有以下HTML和CSS代碼。第二行應該是水平的，但我不明白爲什麼第二行不是水平的。請幫助我製作第二行水平並垂直對齊標籤的元素。

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"> 
<a href="http://localhost/WH/"><div id="kafel1">Socjologia</div></a> 
<a href="http://localhost/WH/"><div id="kafel1">Kulturoznawstwo</div></a> 
<a href="http://localhost/WH/"><div id="kafel1">Informatyka społeczna</div></a> 
</div> 

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

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

輸出已被粘貼here。

Answer 1

你不能在一個單一的網頁相同id多次使用。改爲使用class。

使用.kafel a {display: inline-block;}與下面提到的一些其他屬性，這個問題將被解決。

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; \t 
 
} 
 

 
.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>

Answer 2

這是你在找什麼？

<h3>Studia 1 st</h3> 

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

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

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