这是使用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