将div中的图像居中，右侧显示文本

Question

How can I center an image withing a div what has text on the right hand side. 如何将div居中放置在图像右侧的文本居中。 The page is percentage based and I want the image dead center and the text floated to the right. 页面是基于百分比的，我希望图像不居中并且文本浮动到右侧。

Here is what I have so far 这是我到目前为止的

 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>

I know that I can take the text out to the next line then the logo will be dead center but is it possible to have it on the same line as the image? 我知道我可以将文本移到下一行，然后徽标将居中，但是否可以将其与图像放在同一行？

Answer 1

You can do it like this: 您可以这样做：

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

Check it out here: JSFiddle 在这里查看： JSFiddle

Answer 2

You could mock floating by using absolute positioning by zeroing out the top and right. 您可以通过将顶部和右侧置零来使用绝对定位来模拟浮动。

 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>

Answer 3

Here's a solution that will work on wide and narrow screens: http://codepen.io/pageaffairs/pen/vmwgk 这是在宽屏和窄屏上均可使用的解决方案： 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中的图像居中，右侧显示文本

问题描述

3 个解决方案

解决方案1
0 2014-10-19 23:50:53

解决方案2
0 2014-10-20 00:04:08

解决方案3
0 2014-10-20 00:04:56

将div中的图像居中，右侧显示文本

问题描述

3 个解决方案

解决方案1 0 2014-10-19 23:50:53

解决方案2 0 2014-10-20 00:04:08

解决方案3 0 2014-10-20 00:04:56

解决方案1
0 2014-10-19 23:50:53

解决方案2
0 2014-10-20 00:04:08

解决方案3
0 2014-10-20 00:04:56