使用css菱形

Question

我是CSS的新手，我正在尝试编辑WordPress主题上的CSS。我正在尝试将每个博客帖子上的日期文本更改为居中的菱形。现在，我无法将钻石放在柱子上。

原谅非常凌乱的CSS。我知道它很拙劣。

.post_detail post_date {
   width: 100%;
   float: left;
   margin-bottom: 20px;
   text-align: center;
}
.post_info_date {
  background: #fff;
  height: 60px;
  text-align: center;
  transform:rotate(45deg);
	width: 60px;
  position: inherited;
  bottom: 20%;
}
.post_info_date span {
  color: #333;
  display: table-cell;
  height: 60px;
  transform: rotate(-45deg);
  vertical-align: middle;
	width: 100%;
}

Answer 1

使用line-height财产。

CSS

.post_info_date span {
  color: #333;
  display: block;
  transform: rotate(-45deg);
  vertical-align: middle;
    width: 100%;
  line-height:60px;
}

风格相应。

希望这有助于......