CODEWITHSUNDEEP
css
cranbarrier
cranbarrier

Reputation: 21

Centering text with css diamond shape

I am extremely new to CSS and am trying to edit the CSS on my WordPress theme. I am trying to change the date text on each blog post to a centered diamond. Right now, I am having trouble getting the diamond centered on the post.

Forgive the extremely messy CSS. I know it's botched.

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

Upvotes: 1

Views: 553

Answers (1)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Make USe of line-height property.

CSS

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

Style Accordingly.

Hope this Helps..

Upvotes: 1

Related Questions