CSS 2 divs gleiche vertikale zentriert

-1

ich ein Problem vertikal nebeneinander Zentrierung 2 divs haben:CSS 2 divs gleiche vertikale zentriert

DIV 1 & 2:

Und das ist, was ich erreichen will. Ich würde eine Lösung bevorzugen, die für jede Auflösung funktioniert, oder sich mit der Größe des Elternteils ändert.

Mein Ziel:

Sie deutlich den Unterschied sehen können; Text und Bild sind korrekt vertikal ausgerichtet. :)

Und dies ist mein Code vereinfachter:

<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>

Quelle

2017-03-08 Nabil Hayek

bitte Ihre Codes umfassen. – jmag

Code? Versuchen Sie es mit Flex –

Wieder ist es schwer, ohne Ihren Code zu sehen, aber eine Möglichkeit ist die Anwendung von Rand oben auf das Bild. – paddyfields

Flexbox in den Sinn kommt:

<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>

Quelle

2017-03-08 21:17:43 Lichtbringer

Vielen Dank! Das hat mein Problem gelöst! –

@NabilHayek Gern geschehen. Jetzt, da ich es sehe, können Sie die 'display: inline-block;' Regeln von beiden flex-items entfernen :) – Lichtbringer

Sie immer Code enthalten sollte für andere zu sehen!

Auf jeden Fall können folgende Link

Vertically Align Two Divs

helfen Ihnen ein wenig recherchiert haben sollte, gibt es viele Lösungen gibt.

Quelle

2017-03-08 20:50:04

Aktualisiert den Thread! –

CSS 2 divs gleiche vertikale zentriert

Antwort

Verwandte Themen