這是使用CSS3轉換來處理名稱/标題元素的垂直對齊的一種方法.
我定義了兩個類,.flipLeft和.flipRight來控制名稱/标題和圖像元素的位置.
我假設圖像高度将高于或高于名稱/标題的高度,否則,事情會變得更複雜.
訣竅是使用text-align屬性将圖像放置在父塊的左側或右側.
然後,我使用絕對定位從内容流中取出名稱/标題元素并将其固定到父塊的相對邊緣,并将頂部偏移調整為50％以獲得近似垂直居中.
最後,我使用CSS3變換來調整name / title元素的高度.
注意：在下面的代碼段中,垂直滾動以檢視這兩個示例.
.resumeStyleResumeTitleWrapper17 {
display: block;
width: auto;
border: 1px dotted blue;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
position: relative;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.resumeStyleResumeTitlePhotograph17 {
border: 1px dotted yellow;
display: inline-block;
vertical-align: top;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
display: block;
}
.flipLeft.resumeStyleResumeTitle17 {
text-align: left;
}
.flipLeft .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.flipRight.resumeStyleResumeTitle17 {
text-align: right;
}
.flipRight .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
Flip Image to Left
User Name
Flip Image to Right
User Name