2 divs im Responsive Design vertikal ausrichten

Question

Ich habe 2 Karten, die im Hochformat gestapelt sind, aber nebeneinander in der Landschaft liegen. Ich möchte die 2 Karten im Querformat vertikal zueinander ausgerichtet haben. Der Text der ersten Karte sollte auf die Mitte des Bildes ausgerichtet sein. Ich habe die Flex-Option ausprobiert, aber das bricht im responsiven Design. Kleine Hilfe. Vielen Dank.

<div class="land6"> 
    <header> 
     <h4>T++++</h4> 
    </header> 
    <div> 
     <p>ipsom lorem</p> 
    </div> 
</div> 
<div class="land6"> 
    <div> 
     <img class="right" src="/Thumbs.jpg" width="100%" />     
    </div> 
</div> 

Die CSS:

@media only screen and (orientation:landscape){ 
    .land6{width:49%}} 

Answer 1

Wenn Ihr Stil nicht ändern, wenn Sie von Hoch- auf Querformat zu bewegen, so dass Sie nicht hier, um die Medienabfrage setzen müssen.

Um jeden Kartenstapel aufeinander zu setzen, nehmen Sie die volle Breite der Eltern an Beispiel: width:100%, damit die anderen Karten nicht als nächstes bleiben.

Um den Text in der Mitte des Bildes zu machen, wenn Sie es bereits aufeinander stapeln, einfach text-align:center verwenden, wird das Problem

Answer 2

Wenn Sie Flex-Boxen verwenden, nicht lösen wollen, dann müssen Sie ein anderes Ansatz:

@media only screen and (orientation:portrait) { 
 
    
 
    .land6 { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
} 
 

 
@media only screen and (orientation:landscape) { 
 

 
    .wrapper { 
 
    white-space: nowrap; 
 
    } 
 

 
    .land6 { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 50%; 
 
    } 
 
} 
 

 

 

 
.land6 img { 
 
    width: 100%; 
 
}

<div class=wrapper> 
 
    
 
    <div class="land6"> 
 
    <header> 
 
     <h4>Some header</h4> 
 
    </header> 
 
    <div> 
 
     <p>ipsom lorem</p> 
 
    </div> 
 
    </div> 
 
    <div class="land6"> 
 
    <div> 
 
     <img class="right" src="http://www.wfn360.com/wp-content/uploads/2014/04/thumb.jpeg" />     
 
    </div> 
 
    </div> 
 
<div>