用css菱形對齊文本

我對CSS非常陌生，並且正在嘗試編輯我的WordPress主題上的CSS。我正在嘗試將每篇博文中的日期文本更改爲居中的鑽石。現在，我無法將鑽石置於帖子的中心位置。用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); 
 
\t width: 60px; 
 
    position: inherited; 
 
    bottom: 20%; 
 
} 
 
.post_info_date span { 
 
    color: #333; 
 
    display: table-cell; 
 
    height: 60px; 
 
    transform: rotate(-45deg); 
 
    vertical-align: middle; 
 
\t width: 100%; 
 
}

line-height財產

來源

2017-08-05 cranbarrier

當然，我們不需要你的整個網站以顯示問題（*請參閱[MCVE（https://stackoverflow.com/help/mcve）*）。 –

你是什麼意思「鑽入中心鑽石」。你能舉一個你的意思嗎？ – flyer

您還應該發佈HTML的最小樣本。 – tima

使用。

CSS

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

樣式因此。

希望這有助於..

來源

2017-08-05 03:40:28

用css菱形對齊文本

回答

相關問題