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

这是你在找什么？

<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

Answer 2

您无法在单个网页中多次使用相同的id。请改用class。

将.kafel a {display: inline-block;}与下面提到的其他一些属性一起使用，这个问题就会解决。

＆＃13;

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

＆＃13;

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

＆＃13;

如何垂直对齐Div的元素

2 个答案: