在CSS中定位图像_Css - Fatal编程技术网

在CSS中定位图像

css

在CSS中定位图像,css,Css,基本上，我的网站上有一个导航栏。在导航栏的中心，我希望我的网站的名称居中。这当然很容易，但现在我想我的网站的标志定位在它的左边。浮动：左侧不起作用，因为这只是将徽标放在导航栏的最左侧 <!doctype html> <html> <head> <style> * { margin: 0em; padding: 0em;

基本上，我的网站上有一个导航栏。在导航栏的中心，我希望我的网站的名称居中。这当然很容易，但现在我想我的网站的标志定位在它的左边。浮动：左侧不起作用，因为这只是将徽标放在导航栏的最左侧

<!doctype html> 
<html>
    <head>
        <style>
            *
            {
            margin: 0em;
            padding: 0em;
            }
            #container {
            width:100%;
            border:1px solid #999;
            margin:0px auto 0;
            overflow:hidden;
            background: gray;
            }
            #name {
            text-align: center;
            position: relative;
            }
            #top-left {
            position: relative;
            float: left;
            border: 1px solid black;
            }
            #top-right {
            float:right;
            margin-bottom:10px;
            }
            #bottom-right {
            float:right;
            clear:both;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
            <img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
            <img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
            <h1 id="name">champion</h1>
        </div>
    </body>
</html>


*
{
边距：0em；
填充：0em；
}
#容器{
宽度：100%；
边框：1px实心#999；
保证金：0px自动0；
溢出：隐藏；
背景：灰色；
}
#名字{
文本对齐：居中；
位置：相对位置；
}
#左上角{
位置：相对位置；
浮动：左；
边框：1px纯黑；
}
#右上角{
浮动：对；
边缘底部：10px；
}
#右下角{
浮动：对；
明确：两者皆有；
}
冠军

我让它在这里运行，

float:left

似乎正在工作。我猜我可能遗漏了什么。您是否可以偶然放置一个JSFIDLE或展示一个实例

您可以使用以下技巧：

<table style="background-color:Gray; width:100%;" >     
    <tr>        
      <td style="text-align:right; width:45%">
        <img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
      </td>
      <td style="text-align:left;  width:30%""> 
            <h1 id="name">champion</h1>
      </td>
      <td style="text-align:right; width:25%;">
        <img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
      </td>
    </tr>       
    <tr style="text-align:right;"> 
       <td colspan="3">
        <img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
      </td>
    </tr>
</table>


你可以这样做。它使用：before
将徽标附加到标题文本：

*
{
边距：0em；
填充：0em；
}
#容器{
宽度：100%；
边框：1px实心#999；
保证金：0px自动0；
溢出：隐藏；
背景：灰色；
文本对齐：居中；
}
#名字{
线高：56px；
位置：绝对位置；
宽度：100%；
}
#右上角{
浮动：对；
边缘底部：10px；
}
#右下角{
浮动：对；
明确：两者皆有；
}
h1跨度{
位置：相对位置；
显示：内联块；
填充：0 20px；
}
h1跨度：之前{
内容：“；
宽度：109px；
高度：56px；
背景：url(http://www.webmasterworld.com/gfx/logo.png);
位置：绝对位置；
排名：0；
右：100%；
边框：1px纯黑；
}
冠军
我将创建一个新的div样式，并使用它将图像放在需要的地方。也就是说，请添加您的代码（如果代码超过50行，请将其缩减为问题代码），因为我们会更容易给您答案。我尝试输入代码，但它不允许我！可能还想尝试使用css验证程序，看看您的css文件是否有任何错误。它并不总是正确的，但我发现它对我有很大帮助。你能检查一下吗？我已经修复了它。只是通过验证程序运行了它，说新的css没有问题。你能给我一个网址让我测试一下吗？或者你也可以在W3CCSS验证网站上自己做。听着，行得通，但是如果我垂直对齐文本呢？然后标志不再跟随它。我怎样才能解决这个问题呢？也许可以像我一样，用密码笔写下你的意思，因为你不清楚你想做什么。@ralph.m不要垃圾发送其他答案，声称你的答案是最好的。@ralph.m关于其他答案，不要像你刚才那样试图声称你的答案更好。这个答案是有效的，它可能不是最简单的，但它是有效的。
<!doctype html> 
<html>
    <head>
        <style>
            *
            {
            margin: 0em;
            padding: 0em;
            }

            #container {
            width:100%;
            border:1px solid #999;
            margin:0px auto 0;
            overflow:hidden;
            background: gray;
            text-align: center;
            }

            #name {
            line-height: 56px;
            position: absolute;
            width: 100%;
            }

            #top-right {
            float:right;
            margin-bottom:10px;
            }

            #bottom-right {
            float:right;
            clear:both;
            }

            h1 span {
                position: relative;
                display: inline-block;
                padding: 0 20px;
            }

            h1 span:before {
                content: "";
                width: 109px;
                height: 56px;
                background: url(http://www.webmasterworld.com/gfx/logo.png);
                position: absolute;
                top: 0;
                right: 100%;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
            <img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
            <h1 id="name"><span>champion</span></h1>
        </div>
    </body>
</html>