css - 如何在中心显示图像和文本 float 到图像 css

Question

在这里我想在中心显示图像，然后在我想显示公司 1 的图像的右边 |欢迎管理员|注销

我的问题是我得到这东西 Company 1 |欢迎管理员|在下一行注销你能告诉我为什么会这样吗。

<header>
    <div style="top: 0px; padding: 5px; background-color: black;">
        <div style="text-align:center;margin-left:auto;margin-right:auto;width:40%">
            <img src="~/Content/Images/JPL_Logo.PNG"  />
        </div>
         <div style="color:#FFFF33;height:30px;float:right;">
             Company 1 | Welcome admin | <a href="~/Login/Create" style="color:yellow !important;">Logout</a>
         </div>
        <div class="cleardiv"></div>
    </div>
    <div style="padding: 0px; background-color: black;">
         @Html.Partial("~/Views/Shared/Navigation.cshtml")
    </div>
</header>

Answer 1

要做到这一点非常困难，但这是一个快速解决方法。当 float 两个元素时，您可以用边距定位它们。看到这个 fiddle :http://jsfiddle.net/Ttyz8/

<header>
<div style="top: 0px; padding: 5px; background-color: black;">
    <div style="color:#FFFF33;height:30px;float:right;line-height:28px;">
        <img src="~/Content/Images/JPL_Logo.PNG" style="display:inline-block;float:left;" /><span style=" float:left;margin-top:-4px;"> Company 1 | Welcome admin | <a href="~/Login/Create" style="color:yellow !important;">Logout</a></span>

    </div>
    <div class="cleardiv"></div>
</div>
<div style="padding: 0px; background-color: black;">@Html.Partial("~/Views/Shared/Navigation.cshtml")</div>