html - 无需绝对位置即可实现带溢出居中

Question

我正在尝试实现使居中图像流过其包含的 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/

附言我愿意使用几乎任何东西，只要它干净地完成工作即可。

Answer 1

您可以使用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;
}