將文字居中放在格子中的圖像

如何將圖像與div對齊右側有文字。該頁面是基於百分比的，我希望圖像處於死點，文字向右移動。將文字居中放在格子中的圖像

這裏是我迄今爲止

IMG.logo { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto }

<div id="logoDiv"> 
 
    <p class="bold marginleft5 floatright paddingtop60">Logout</p><p class="floatright paddingtop60">Hello Bill</p> 
 
    <img alt="Logo" src="~/Content/Images/logo.png" class="logo" height="80" width="245" /> 
 
</div>

我知道，我可以把文本輸出到下一行，則標誌會死人的中心，但有可能有它與圖像在同一條線上？

來源

2014-10-19 WillNZ

你可以這樣說：

IMG.logo { 
    position: absolute; 
    left: 50%; 
    -ms-transform: translate(-50%); 
    -webkit-transform: translate(-50%); 
    transform: translate(-50%); 
}

看看這裏：JSFiddle

來源

2014-10-19 23:50:53

你可以嘲笑浮動通過使用絕對定位通過清空頂部和右側。

img.logo { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
.floatright { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 400px; 
 
    margin-right: 8px; 
 
    text-align:right; 
 
} 
 
.line1 { 
 
    top: 0px; 
 
} 
 
.line2 { 
 
    top: 16px; 
 
} 
 
.bold { 
 
    font-weight: bold; 
 
}

<div id="logo-div"> 
 
    <p class="bold floatright line1">Logout</p> 
 
    <p class="floatright line2">Hello Bill</p> 
 
    <img alt="Britannia Logo" src="~/Content/Images/logo.png" 
 
     class="logo" height="80" width="245" /> 
 
</div>

來源

2014-10-20 00:04:08

這裏有一個解決方案，將工作在寬和窄屏：http://codepen.io/pageaffairs/pen/vmwgk

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

.logoDiv { 
    width: 100%; 
} 

.logo { 
    text-align: center; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

.text { 
    width: calc(50% - 130px); 
    float: right; 
} 

</style> 
</head> 
<body> 

<div class="logoDiv"> 
    <div class="text"> 
     <p>Logout</p> 
     <p>Hello Bill</p> 
    </div> 
    <div class="logo"> 
     <img alt="Britannia Logo" src="http://placehold.it/245x80" height="80" width="245"> 
    </div> 
</div> 

</body> 
</html>

來源

2014-10-20 00:04:56

將文字居中放在格子中的圖像

回答

相關問題