中心のdivの側にオブジェクトをアタッチする

Question

this fiddleのように、左上隅の外側にロゴが付いた中心のコンテンツの列が必要です。

HTML：

<div> 
    I'm centered 
    <div> 
     I'm glued to the centered div 
    </div> 
</div> 

CSS：

div 
{ 
    background-color: pink; 
    width: 300px; 
    height: 400px; 
    margin: 0 auto; 
    position: relative; 
} 
div div 
{ 
    width: 100px; 
    height: 100px; 
    background-color: cyan; 
    left: -100px; 
    top: 0px; 
    position: absolute; 
} 

それは、コンテンツとプレゼンテーションの分離の失敗のように思えるので、私は自分のソリューションに満足していないよ - 私の場合は、シアン箱ロゴ、ピンクのボックスが内容です。コンテンツとロゴの両方をラッパーdivにすることはできません。なぜなら、コンテンツとロゴを合わせずに、私が中心にしたいコンテンツだからです。

もっとクリーンな方法がありますか？

Answer 1

あなたはCSSプロパティこのようdisplay: flex

使用することができます

HTML

<div class="container"> 
    <div class="content"> 
    <div class="logo"></div> 
    </div> 
</div> 

CSSを

.container { 
    display: flex; 
    justify-content: center; 
    flex-direction: row; 
} 
.content 
{ 
    background-color: pink; 
    width: 300px; 
    height: 400px; 
} 
.logo 
{ 
    width: 100px; 
    height: 100px; 
    background-color: cyan; 
    left: -100px; 
    position: relative; 
} 

アン私は問題が何かを得ていない。