html - 徽标中的相对位置不起作用

Question

我创建了一个设计，如下所示

http://jsfiddle.net/g9TT7/1/

我想把标志的意思放在页面的顶部和左侧下方

<a href="index.html"  style="margin-top:10px;position:relative!important;width:200px;display:block;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>

在这里，我想将企业名称放在页面的中心，徽标将在页面的左侧。我在我的徽标中设置了绝对位置，但没有工作。请帮助我做到这一点。

Answer 1

像这样的东西？http://jsfiddle.net/ADDTn/

<div class="header">
    <a href="#" class="logo">
        <img src="img.jpg" />
    </a>
    <h1>Bussiness</h1>
    <div class="clear"></div>
</div>

css

.header {
    width: 100%;
    height: 100px;
}

.logo {
    display: block;
    float: left;
}

h1 {
    text-align: center;
}

.clear {
    clear: both;
}

Answer 2

我希望你想要这样的东西：

演示

在您的徽标样式中添加 css float:left 并从业务 div 中删除绝对位置。您还可以通过使用边距从顶部和左侧调整位置。

HTML：

<div class="b" style="text-align:center;">      

        <a href="index.html" class="img1">
                <img src="image/img_2.png" alt="logo" />
        </a>

        <div class="business_name" >
                            Business
        </div>
        <div class="clear"></div>
</div>

CSS：

.clear
{
    clear:both;
}
.img1{
    margin-top:20px;
    width:200px;
    display:block;
    float:left;
}
.business_name {
    width: 78%;
    font-size: 43px;
    font-weight: bold;
    float: left;
    text-align: center;
    line-height: 28px;
    margin-top: 5px;
}

.b {
    font-size: 25px;
    font-weight: bold;
    width: 78.5%;
    text-align: left;
    height: 50px;
    margin: 0px;
    color: rgb(67, 161, 240);
}
.img1 {
    float: left;
    margin: 2px 0px 0px;
    width: 20%;
    text-align: left;
    border: 0px solid red;
}

Answer 3

分配 z-index 值

<a href="index.html"  style="margin-top:10px;position:relative!important;width:200px;display:block; z-index: 1;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>

看这个演示