Question

我正在尝试垂直对齐2个div。一个定义的大小与背景图像，另一个是多行文本（在它之上的元素之前）。我没有完全控制多少，因为它取决于屏幕的宽度。

HTML

 <div class="brand-wrap">
    <a class="navbar-brand" href="<?php echo home_url(); ?>"></a>

    <div class="brand-text">
        <p>test text text text text text text ...</p>
    </div>
</div>

CSS

.navbar-brand {
  display: inline-block;
  margin-top: 10px; 
  padding: 0;
  height: 60px;
  width: 60px;
  background: url('img/logo_orig.png') no-repeat center center;
  background-size: auto 100%;
}

.brand-wrap {
  display: inline-block;
}

.brand-text {
  position: relative;
  font-size: 12px;
  display: inline-block;
  color: #fff;
}

.brand-text:before {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  position: absolute;
  left: 0;
  top:-7px;
  background-color: red;
}

我拥有的东西使它彼此相邻，但没有居中。我希望“text”div没有定义高度的东西。

Answer 1

您可以使用flexbox来解决此问题。你没有提供一个实例，但这是我想象的：

＆＃13;

*{
  box-sizing:border-box;
}
#wrapper{
  background-color: #333333;
  padding: 5px;
  display:flex;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex; 
  flex-direction: row;
  align-items: center;
}
#navbar{
  width: 60px;
  min-width: 60px;
  height: 60px;
  background-color: #EE4433;
  border: 2px dashed white;
}
#other{
  color: white;
  margin-left: 5px;
  border: 2px dashed white;
}

＆＃13;

<div id="wrapper">
  <div id="navbar"></div>
  <div id="other">
    <a class="navbar-brand" href="<?php echo home_url(); ?>"></a>

    <div class="brand-text">
        <p>test text text text text text text ...test text text text text text text ...test text text text text texttest text text text text text text ...test text text text text text text ...test text text text text text</p>
    </div>
  </div>
</div>

＆＃13;

只需使用align-items: center;

即可

Answer 2

在我看来，您需要做的就是向/** * This is how you check with Google if the user previously purchased a non-consumable IAP * @param context App Context */ public static void queryPlayStoreForPurchases(Context context) { final IabHelper helper = new IabHelper(context, getPublicKey()); helper.startSetup(new IabHelper.OnIabSetupFinishedListener() { public void onIabSetupFinished(IabResult result) { if (!result.isSuccess()) { Log.d("InApp", "In-app Billing setup failed: " + result); } else { helper.queryInventoryAsync(false, new IabHelper.QueryInventoryFinishedListener() { public void onQueryInventoryFinished(IabResult result, Inventory inventory) { // If the user has IAP'd the Pro version, let 'em have it. if (inventory.hasPurchase(PRO_VERSION_SKU)) { //TODO: ENABLE YOUR PRO FEATURES!! Log.d("IAP Check", "IAP Feature enabled!"); } else { Log.d("IAP Check", "User has not purchased Pro version, not enabling features."); } } }); } } }); }和vertical-align:middle添加.navbar-brand（注意将.brand-text移至margin-top: 10px .brand-wrap。

.navbar-brand

.navbar-brand {
  display: inline-block;
  padding: 0;
  height: 60px;
    vertical-align:middle;
  width: 60px;
  background: #000 url('img/logo_orig.png') no-repeat center center;
  background-size: auto 100%;
}

.brand-wrap {
  display: inline-block;
  margin-top: 10px;
}

.brand-text {
  position: relative;
    border: 1px solid #000;
  font-size: 12px;
  display: inline-block;
  color: #000;
    vertical-align:middle;
}

.brand-text:before {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  position: absolute;
  left: 0;
  top:-7px;
  background-color: red;
}

垂直对齐divs - 未知高度

2 个答案: