Question

我的网站上有以下代码。

HTML

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

        <div class="brand-text">
            <p>This is a bunch of content that may take up more than one line of text</p>
        </div>
</div>

CSS

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

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

.brand-text {
  position: relative;
  font-size: 12px;
  display: inline-block;
  color: #fff;
  margin-left: 25px;
  vertical-align: middle;
}

我正在尝试垂直对齐导航栏品牌和品牌文字，但我只能让它们彼此相邻。 vertical-align：middle似乎不起作用。（*内容可能占用多行，具体取决于屏幕宽度）

如何垂直对齐内容？

Answer 1

我没有看到问题 - 只是在这里尝试了你的代码，它似乎应该工作，或者至少我理解。也许更具体地说明你想要实现什么目标？

也许你根本不明白垂直对齐应该做什么？

http://codepen.io/anon/pen/QboXov

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

        <div class="brand-text">
            <p>This is a bunch of content that may take up more than one line of text<br/>This is a bunch of content that may take up more than one line of text<br/>This is a bunch of content that may take up more than one line of text<br/>This is a bunch of content that may take up more than one line of text<br/>This is a bunch of content that may take up more than one line of text</p>
        </div>
</div>

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

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

.brand-text {
  position: relative;
  font-size: 12px;
  display: inline-block;
  color: #ccc;
  margin-left: 25px;
  vertical-align: middle;
}

Answer 2

vertical-align将一个块与另一个块对齐...而不是块本身的内容。

定位的差异在于您navbar-brand上的保证金最高。

如果你删除它，你可以看到一切都排好了。

.navbar-brand { display: inline-block; padding: 0; height: 60px; width: 60px; background: orange; vertical-align: middle; } .brand-wrap { position: relative; display: inline-block; background: lightgreen; } .brand-text { position: relative; font-size: 12px; display: inline-block; margin-left: 25px; vertical-align: middle; background: lightblue; border: 1px solid green; padding: 0 1em; }

<div class="brand-wrap"> <a class="navbar-brand" href="#"></a> <div class="brand-text"> <p>This is a bunch of content that may take up more than one line of text</p> </div> </div>

vertical-align：没有定义高度的中间属性

2 个答案: