居中的div

Question

我有這個目前：

我想實現這一點：

基本上垂直居中的內容。我試過：

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> 

Answer 1

如果您將大部分div更改爲跨度，則使用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; 
} 

Answer 2

您或許可以使用margin-top:50px;來解決這個問題了。

請標記爲答案，如果有幫助。

Answer 3

可能最簡單的方法是根本不使用浮動。

如果您修改了HTML並將所有內容設置爲display:inline-block，則可以使用text-align和vertical-align來將其餘部分與其他圖標進行比較。

div.avatar-name-signout-container { 
 
    background: lightblue; 
 
    height: 100px; 
 
    width: 300px; 
 
    text-align: right; 
 
} 
 
div.avatar-name { 
 
    background: lime; 
 
    display: inline-block; 
 
} 
 
div.avatar { 
 
    display: inline-block; 
 
    background-size: contain; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-image: url('http://diondifc.com/img/team_pic1.jpg'); 
 
    vertical-align: middle; 
 
} 
 
div.name { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
div.signout { 
 
    display: inline-block; 
 
}

<div class="avatar-name-signout-container"> 
 

 
    <div class="avatar-name"> 
 
    <div class="avatar"></div> 
 
    <div class="name">Karl</div> 
 
    </div> 
 
    <div class="signout"> 
 
    sign out 
 
    </div> 
 
</div>