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

相应的样式。

希望这有帮助..