2017-02-15 6 views
0

レスポンスグリッドを作成するために2つのフレームワーク(skeleton.cssとcrow.css)をテストしていますが、2つの列に1つのdivを集中して配置することはできません。 2枚の写真は、それがどのように見えるかを示すあります:2つのdivで反応するdiv/button/imageを作成するにはどうすればよいですか?

:骨格を有する

.box { 
    background: #eee; 
    border-radius: 4px; 
    height: 200px; 
    border: 1px solid black; 
} 
.img { 
    position: absolute; 
    left: 550px; 
} 
.crow { 
    position: relative; 
} 

HTMLコード:カラスと

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/crow.css"> 
    <link rel="stylesheet" href="css/custom.css"> 
</head> 
<body> 
    <div class="crow"> 
    <div class="ws-5 box"> 
    </div> 
    <img class="img" src="images/img.png"> 
    <div class="ws-5 box"> 
    </div> 
    </div> 
</body> 
</html> 

のcustom.css:カラスと Desktop Smartphone 実際のHTMLコード

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/skeleton.css"> 
    <link rel="stylesheet" href="css/custom.css"> 
</head> 
<body> 
    <div class="container"> 
    <div class="six columns box"> 
    </div> 
    <img class="img" src="images/img.png"> 
    <div class="six columns box"> 
    </div> 
    </div> 
    </div> 
</body> 
</html> 

custom.cssスケルトン:

.box { 
    background: #eee; 
    border-radius: 4px; 
    height: 200px; 
    border: 1px solid black; 
} 
.img { 
    position: absolute; 
    left: 420px; 
} 
.container { 
    position: relative; 
} 
+0

あなたが使用しているフレームワーク内のソリューションを探している、またはカスタムコードソリューションに開いていますか? – Jesse

+0

イメージの寸法を100px * 100pxと仮定すると、 '.img { 位置:絶対; 左:calc(50% - 50px); top:calc(50%〜50px); } '.Browzayの寸法を定義する必要があります。 – Banzay

+0

@Banzay、何も起こりません。 –

答えて

0

css transformプロパティを使用して、必要な位置合わせを行うことができます。

それは、完全に私はあなたのための「スケルトン」1を行っている.img

を中心に、再び右にその幅の半分でそれを相殺.img〜50%の左側を設定することで動作し、その後、transform: translate(-50%)しかし、「カラス」1は同じになります。

.box { 
 
    background: #eee; 
 
    border-radius: 4px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 
.img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.container { 
 
    position: relative; 
 
}
<div class="container"> 
 
    <div class="six columns box"> 
 
    </div> 
 
    <img class="img" src="http://placehold.it/350x150"> 
 
    <div class="six columns box"> 
 
    </div> 
 
</div>

1

はこのスタイリング、あまりにも多くの時間を費やし、@Zzeはパンチに私を打ちます。しかし、はい、相対的な絶対的な位置付けプラスtranslate()は間違いなく仕事を完了します。

.wrap { 
 
    position: relative; 
 
    max-width: 960px; 
 
    margin: auto; 
 
    background: rgba(0,0,0,0.1); 
 
    padding: 2.5%; 
 
    box-sizing: border-box; 
 
    height: 360px; 
 
    } 
 
.left, .right { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    } 
 
    
 
.content { 
 
    background: #84bde4; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 

 
.centered { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 99; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100px; 
 
    background: #f1c25e; 
 
    box-shadow: 0px 16px 26px -10px rgba(0,0,0,0.25); 
 
    text-align: center; 
 
    }
<div class="wrap"> 
 
    <div class="centered"></div> 
 
    <div class="left"><div class="content"></div></div> 
 
    <div class="right"><div class="content"></div></div> 
 
</div>

+0

申し訳ありませんJesse、あなたのものは素晴らしいですね! – Zze

+0

母、心配しないで! – Jesse

関連する問題