如何在中心和文本中显示图像以向右浮动到图像css

时间:2014-01-17 09:19:47

标签: css asp.net-mvc-4

这里我想在中心显示图像,然后右边显示我要显示公司1 |的图像欢迎管理员|退出

这里我的问题是得到这件事公司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>

3 个答案:

答案 0 :(得分:1)

很难做到这一点,但这是一个快速解决方案。浮动两个元素时,可以使用边距定位它们。看到这个小提琴: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>

答案 1 :(得分:0)

您可以使用position style = absolute作为欢迎消息div,并将top和right设置为您希望的位置。

答案 2 :(得分:0)

感谢您的支持 我得到了这个

<div style="top: 0px; padding: 5px; background-color: black;">

        <div style="color:#FFFF33;height:90px;float:right;line-height:28px;">
            <img src="~/Content/Images/JPL_Logo.PNG" style="display:inline-block;float:left;padding-right:17em" />
            <span style=" float:left;margin-top:65px;"> Company 1 | Welcome admin | <a href="~/Login/Create" style="color:yellow !important;">Logout</a></span>
         </div>
        <div class="cleardiv"></div>
    </div>