CSS 2つのdiv要素は、私が垂直方向に互いに横に2つのdivを中心に問題を抱えている

-1

を中心に。私は、任意の解像度で動作するソリューション、または親divのサイズの変更を希望します。CSS 2つのdiv要素は、私が垂直方向に互いに横に2つのdivを中心に問題を抱えている

私の目標：

あなたは違いをはっきりと見ることができます。テキストとイメージは正しく垂直に整列されます。 :)

そして、これは私のコードsimplyfiedです：

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> 
 
    </head> 
 
    <body> 
 
    <div class="bet-content"> 
 
     <div class="bet-prof" style="display: inline-block;"> 
 
     <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;"> 
 
     </div> 
 
     <div class="bet-desc" style="display: inline-block;"> 
 
     <span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span> 
 
     <span>With a wager of <span style="color: #e7aa18;">$20.0</span></span> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-03-08 Nabil Hayek

してください、あなたのコードを含みます。 – jmag

コード？フレックスを試してください –

もう一度あなたのコードなしで見るのは難しいですが、画像に余白部分を適用している可能性があります。 – paddyfields

フレキシボックスが頭に浮かぶ：

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> 
 
    </head> 
 
    <body> 
 
    <div class="bet-content" style="display: flex; align-items:center;"> 
 
     <div class="bet-prof" style="display: inline-block; background: red;"> 
 
     <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;"> 
 
     </div> 
 
     <div class="bet-desc" style="display: inline-block; background: green;"> 
 
     <span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span> 
 
     <span>With a wager of <span style="color: #e7aa18;">$20.0</span></span> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-03-08 21:17:43 Lichtbringer

ありがとう！これは私の問題を解決しました！ –

@NabilHayekようこそ。実際は私が見るようになったので、両方のフレックスアイテムから 'display：inline-block;'ルールを削除することができます:) – Lichtbringer

あなたはいつも見て他の人のためのコードを含める必要があります！とにかく、リンクを次

あなたは少し研究している必要があります

Vertically Align Two Divs

を助けることが、解決策がたくさんあります。

出典

2017-03-08 20:50:04

スレッドを更新しました！ –

CSS 2つのdiv要素は、私が垂直方向に互いに横に2つのdivを中心に問題を抱えている

答えて

関連する問題