Question

我意识到网上有很多垂直对齐的解决方案，不幸的是，我的浮动右框中的自动换行似乎打破了我尝试过的大多数。

我的文件的页脚上有花车离开了一个简单的版权公司＆＃34;苹果公司提出小产品的必要条款和条件 - 这些信息必须随着响应大小的屏幕变得越来越小 - 随着这种情况的发生，div变大，左边的元素停止对齐中间 - 我越乱我的代码越混乱和丢失我得到！这就是我到目前为止所做的......（。footend试图在其他地方找到一个有效的想法，直到自动换行开始，所以可以一起删除）

<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

只需移除float，position: absolute并为。left / .right提供正确的计算宽度，垂直居中即可。

另一种方法是使用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>

垂直对齐浮动div在响应主题中包装文本

1 个答案: