將div中的圖像居中，右側顯示文本
[英]Center an image in a div with text on the right
問題描述
如何將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>
我知道我可以將文本移到下一行，然后徽標將居中，但是否可以將其與圖像放在同一行？
3 個解決方案
解決方案1
0 2014-10-19 23:50:53
您可以這樣做：
IMG.logo {
position: absolute;
left: 50%;
-ms-transform: translate(-50%);
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
在這里查看： JSFiddle
解決方案2
0 2014-10-20 00:04:08
您可以通過將頂部和右側置零來使用絕對定位來模擬浮動。
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>
解決方案3
0 2014-10-20 00:04:56
這是在寬屏和窄屏上均可使用的解決方案： 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>
在div中以圓形背景圖像居中放置大文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.