如何垂直对齐div彼此相对

Question

我使用display:inline-block将两个div放在彼此相对的位置，现在我希望右侧的div应该相对于左侧div居中。

我尝试过使用以下内容，

HTML：

<div class="header_first_above">
  <div class="first_above">
    <div class="logo">
      <p><img src="assets/img/logo_new.jpg" /></p>
    </div>
    <div class="icons">
      sd
    </div>
  </div>
</div>  

CSS：

 .header_first_above {
   width: 90%;
   height: 150px;
   background: #FFFFFF;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   position: absolute;
   left: 5%;
   margin: 0 auto;
   top: 0;
   -moz-box-shadow: 0 0 15px #ccc;
   -webkit-box-shadow: 0 0 15px #ccc;
   box-shadow: 0 0 15px #ccc;
 }

 .header_first_above .first_above {
   width: 100%;
 }

 .header_first_above .first_above .logo {
   width: 20%;
   padding: 10px;
   display: inline-block;
 }

 .header_first_above .first_above .icons {
   width: 77%;
   display: inline-block;
   color: red;
   text-align: right;
   background: #F1B0B1;
   position: absolute;
   margin: 0;
   top: 10%;
 }  

当前输出，

所需的输出，

如何做到这一点。我已经尝试了很多。

Answer 1

一种解决方案是使用display:table

http://jsbin.com/sulopikuso/1/edit?html,css,output

另一种解决方案是使用display:flex

http://jsbin.com/yififomiso/edit?html,css,output

如果使用Flex版本，请注意浏览器支持http://caniuse.com/#search=flexbox及其供应商前缀。

Answer 2

您可以移除position:absolute并使用css calc计算.icons的宽度，不要忘记display:inline-block; .header_first_above { width: 90%; height: 150px; background: #FFFFFF; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position: absolute; left: 5%; margin: 0 auto; top: 0; -moz-box-shadow: 0 0 15px #ccc; -webkit-box-shadow: 0 0 15px #ccc; box-shadow: 0 0 15px #ccc; } .header_first_above .first_above { width: 100%; } .header_first_above .first_above .logo { width: 20%; padding: 10px; display: inline-block; background-color: red; } .header_first_above .first_above .icons { width: calc(100% - 20% - 20px); display: inline-block; color: red; text-align: right; background: #F1B0B1; margin: 0; } <div class="header_first_above"> <div class="first_above"> <div class="logo"> <p> <img src="assets/img/logo_new.jpg" /> </p> </div><!-- --><div class="icons"> sd </div> </div> </div> }

remove extra spaces

＆＃13;

＆＃13;

char[] chars=line.toCharArray();

＆＃13;

ERROR ITMS-90098: "This bundle is invalid. The key UIRequiredDeviceCapabilities contains value 'healthkit' which is incompatible with the MinimumOSVersion value of '7.1'."

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您知道想要垂直居中的div的高度，您可以使用的一个技巧是绝对或相对定位，并且上边距为负：

.header_first_above .first_above .icons {
    position: relative;
    top: 50%;
    height: 150px;
    margin-top: -75px;
}