Question

我正在尝试在框的中心对齐文本，但是它不起作用。文本始终显示在顶部中心。我要放在盒子中间。

<div class="container">
  <div class="square square1"><span style="color:white;" class="text-center"><h3>ADD TEACHER</h3></span></div>
</div>

CSS：

.container {
  margin-top: 180px;
  text-align: center
}

.square {
  display: inline-block;
  background-color: #00A896;
  border-radius: 5px;
  height: 200px;
  width: 200px;
  margin: 0 40px;
  transition: transform 0.2s ease-in-out;
}

.square1:hover {
  transform: rotate(15deg);
}

JS Fiddle

Answer 1

使用display：flex属性。

.container {
  display: flex;
  justify-content: center;
         }
.square {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00A896;
  border-radius: 5px;
  height: 200px;
  width: 200px;
  transition: transform 0.2s ease-in-out;
}

.square1:hover {
  transform: rotate(15deg);
}

<div class="container">
  <div class="square square1"><span style="color:white;" class="text-center"><h3>ADD TEACHER</h3></span></div>
</div>

Answer 2

为什么不使用flex？

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00A896;
  border-radius: 5px;
  height: 200px;
  width: 200px;
  transition: transform 0.2s ease-in-out;
}

Answer 3

.container {
  display:flex;
  justify-content:center;
  
}

.square {
  display: flex;
  justify-content:center;
  align-items:center;
  background-color: #00A896;
  border-radius: 5px;
  height: 200px;
  width: 200px;
  margin: 0 40px;
  transition: transform 0.2s ease-in-out;
}

.square1:hover {
  transform: rotate(15deg);
}

<div class="container">
  <div class="square square1"><span style="color:white;" class="text-center"><h3>ADD TEACHER</h3></span></div>
</div>

Answer 4

尝试一下，可能会对您有所帮助。使用位置和变换。使任何组件中心不只是文本更容易。

.container {
  margin-top: 180px;
  text-align: center
}

.square {
  display: inline-block;
  background-color: #00A896;
  position: relative ;
  border-radius: 5px;
  height: 200px;
  width: 200px;
  margin: 0 40px;
  transition: transform 0.2s ease-in-out;
}

.square1:hover {
  transform: rotate(15deg);
}
.text-center{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

<div class="container">
  <div class="square square1"><span style="color:white;" class="text-center"><h3>ADD TEACHER</h3></span></div>
</div>

Answer 5

尝试使用line-height

.square {
  display: inline-block;
  background-color: #00A896;
  border-radius: 5px;
  height: 200px;
  width: 200px;
  margin: 0 40px;
  transition: transform 0.2s ease-in-out;
  line-height:150px;
}

在框中心对齐文本

5 个答案: