Vertikal ausgerichtete Floated divs in responsive Thema mit eingewickelten Text

Question

Ich realisiere, es gibt viele Lösungen für die vertikale Ausrichtung online, leider das Wort-Wrap in meinem schwimmenden rechten Kasten scheint die meisten zu brechen, die ich ausprobiert habe.

Es ist eine Fußzeile meines Dokuments mit Floats eine einfache "Copyright-Firma" und schwebt direkt die Bedingungen von Apple für die Erwähnung ihrer Produkte in Kleingedrucktes - diese Info muss Wortumbruch als die Responsive Größe Bildschirme kleiner werden - als Das geschieht, wenn das Div größer wird und das Element, das links schwebt, nicht mehr in der Mitte ausgerichtet ist - je mehr ich mich mit dem Code beschäftige, desto verwirrter und verlorener werde ich! Hier ist, was ich bisher ... (.footend war ein Versuch, eine Idee, die Bereitstellung anderer Stelle gefunden, die bis in die Zeilenumbruch beginnt gearbeitet, so können wohl alle zusammen entfernt werden)

<div id="Footer"> 
<!-- FOOTER --> 
<div class="content-inner footend"> 
      <div class="left">© Company 2016</div> 
      <div class="right"> 
<img src="http://update.s3-eu-west-1.amazonaws.com/images/apple-logo.png" alt="Apple Logo" style="width:8px;"> 
Apple Logo, Mac, OS X, iPhone, iMac, Mac mini, Mac Pro, MacBook, MacBook Pro, MacBook Air, iOS, MacApp and Retina are trademarks of Apple Inc., registered in the U.S. and other countries. 
    </div> 
</div> 
<div class="clr"></div> 
<!-- 'FOOTER --> 
</div> 

CSS

.content-inner { 
margin: 0 auto; 
max-width: 840px; 
width: 100%; 
} 

.content-inner-600 { max-width: 600px; } 
.content-inner-620 { max-width: 620px !important; border: 0px solid red; } 

.footend {} 
.footend:before { 
content: ''; 
display: inline-block; 
height: 100%; 
vertical-align: middle; 
margin-right: -0.25em; /* Adjusts for spacing */ 
} 

#Footer { 
background: #ef4935 !Important; 
color: #fff; 
font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
padding: 15px 0; 
} 

#Footer .left {float: left; width: 30%; font-size: .77em; margin-top:2px; display: inline-block;vertical-align: middle; position: absolute;} 
#Footer .right {float: right; width: 40%; font-size: .6em !important; line-height: 1em; margin: 0px 20px 0 0; font-weight: 200 !important; text-align: justify; display: inline-block; vertical-align: middle;} 

Answer 1

Entfernen Sie einfach die float, position: absolute und geben Sie die. left/.right eine korrekt berechnete Breite, vertikale Zentrierung funktioniert.

Eine weitere Möglichkeit, verwenden flexbox

.content-inner { 
 
    margin: 0 auto; 
 
    max-width: 840px; 
 
} 
 

 
.content-inner-600 { max-width: 600px; } 
 
.content-inner-620 { max-width: 620px !important; border: 0px solid red; } 
 

 
.footend {} 
 
.footend:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    margin-right: -0.25em; /* Adjusts for spacing */ 
 
} 
 

 
#Footer { 
 
    background: #ef4935 !Important; 
 
    color: #fff; 
 
    font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    padding: 15px 0; 
 
} 
 

 
#Footer .left {width: calc(50% - 4px); font-size: .77em; margin-top:2px; display: inline-block;vertical-align: middle; } 
 
#Footer .right {width: calc(50% - 24px); font-size: .6em !important; line-height: 1em; margin: 0px 20px 0 0; font-weight: 200 !important; text-align: justify; display: inline-block; vertical-align: middle;}

<div id="Footer"> 
 
    <!-- FOOTER --> 
 
    <div class="content-inner footend"> 
 
    <div class="left">© Company 2016</div> 
 
    <div class="right"> 
 
     <img src="http://placehold.it/50" alt="Apple Logo" style="width:8px;"> 
 
     Apple Logo, Mac, OS X, iPhone, iMac, Mac mini, Mac Pro, MacBook, MacBook Pro, MacBook Air, iOS, MacApp and Retina are trademarks of Apple Inc., registered in the U.S. and other countries. 
 
    </div> 
 
    </div> 
 
    <div class="clr"></div> 
 
    <!-- 'FOOTER --> 
 
</div>