Question

如何将带有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>

我知道我可以将文字带到下一行，然后徽标将是死点，但是可以将它与图像放在同一行吗？

Answer 1

你可以这样做：

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

请在此处查看：JSFiddle

Answer 2

您可以通过将顶部和右侧清零来使用绝对定位来模拟浮动。

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

这是一个适用于宽屏和窄屏的解决方案：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 个答案: