在没有绝对位置的情况下实现溢出中心

时间:2013-12-19 18:45:37

标签: html css

我正在尝试实现一个居中的图像流过其包含div的边框,但不使用position:absolute,因为它隐藏了它后面的标题按钮。有没有干净的方法可以做到这一点,而不是只使用旧学校的绝对位置与所有元素(如果我尝试做任何响应,这将是一个真正的痛苦)?

相关代码:

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
}

.container.no-border {
    border: none;
    background-color: transparent;
    position: relative;
}

#logo {
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%;
    width: 150px;
    margin-left: -75px; 
}

JSFiddle:http://jsfiddle.net/bH35r/

P.S。只要干净利落地完成工作,我愿意利用几乎任何东西。

2 个答案:

答案 0 :(得分:0)

使用CSS背景图片。

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
    background-image:url(....);
    background-repeat-no-repeat;
    background-position: 0px 0px; <--- adjust accordingly.
}

通常,作为UI(不是内容)一部分的图像应该是CSS背景,而不是内联图像。

答案 1 :(得分:0)

您可以使用display:inline-block;

<强> FIDDLE

HTML:

<div class="section header">
    <div class="container no-border">
        <a class="header" href="#">About</a>
        <a class="header" href="#">News</a>
        <a class="header" href="#">Teams</a>
        <div class="logo_wrap">
            <img id="logo" src="http://equineclub.zachschristmaslist.info/images/pennant.png"/>
        </div>
        <a class="header" href="#">Apparel</a>
        <a class="header" href="#">Sponsorship</a>
        <a class="header" href="#">Contact</a>
    </div>
</div>

CSS:

body {
    margin: 0;
    font-family: Helvetica;
    font-size: 100%;
    background-color: #191A18;
}

.section {
    margin: 0;
    padding: 0;
    clear: both;
}

.section.header {
    background-image: url('../images/background.png');
    background-position: 50% 90%;
    border-bottom: 1px solid #A8A8A8;
    box-shadow: 0 1rem 1rem #000;
    text-align: center;
}

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
}

.container.no-border {
    border: none;
    background-color: transparent;
    position: relative;
}

.container.logo {
    background-image: url('../images/main-image.jpg');
    background-position: 50% 20%;
    min-height: 20rem;
}

a.header {
    color: white;
    display:inline-block;
    text-decoration: none;
    padding: 3rem 1.5rem;
    margin: 0 0.5rem;
    background-color: rgba(255,255,255,0.1);
}

#logo {
    width: 150px;

}
.logo_wrap{
    display: inline-block; 
    height: 5.5rem;
    vertical-align:top;
    overflow:visible;
}