我目前有这个:
我想实现这一目标:
基本上将内容垂直居中。我尝试过:
display: table-cell;
vertical-align: middle;
只是似乎没有到达那里。
https://jsfiddle.net/pjvxh34h/
它对我的摆弄如何:
CSS:
div.avatar-name-signout-container {
background:lightblue;
height:100px;
width:300px;
}
div.avatar-name {
float: right;
background: lime;
}
div.avatar {
display:inline-block;
background-size: contain;
width: 50px;
height:50px;
background-image: url('http://diondifc.com/img/team_pic1.jpg');
}
div.name {
float:right;
}
div.signout {
float:right;
}
的HTML:
<div class="avatar-name-signout-container">
<div class="signout">
sign out
</div>
<div class="avatar-name">
<div class="avatar"></div>
<div class="name">Karl</div>
</div>
</div>
最佳答案
如果将大多数div更改为span,则使用line-height
属性控制它们并使其垂直对齐会更容易。检查JsFiddle
的HTML
<div class="avatar-name-signout-container">
<span class="signout">
sign out
</span>
<span class="avatar-name">
<span class="avatar"></span>
<span class="name">Karl</span>
</span>
</div>
的CSS
div.avatar-name-signout-container {
background:lightblue;
height:100px;
line-height:100px;
width:300px;
}
.avatar-name {
display: inline;
float: right;
background: lime;
margin-top: 20px;
line-height: 60px;
}
.avatar {
display:inline-block;
background-size: contain;
width: 50px;
height:50px;
background-image: url('http://diondifc.com/img/team_pic1.jpg');
vertical-align: middle;
}
.name {
float:right;
}
.signout {
float:right;
}