html - 垂直对齐 div - 未知高度

标签 html css

我正在尝试垂直对齐 2 个 div。一个定义的大小带有背景图像,另一个是多行文本(上面有一个 :before 元素)。我无法完全控制数量,因为这取决于屏幕的宽度。

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;
}

我所拥有的使它彼此并排,但不居中。我想要“文本”div 没有定义高度的东西。

最佳答案

可以使用flexbox来解决这个问题。你没有提供一个活生生的例子,但这是我的想象:

*{
  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;
}
<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>

只需使用align-items: center;

关于html - 垂直对齐 div - 未知高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31930516/

相关文章:

css - 网格中的 Susy 2 网格

javascript - 如何在 HTML 页面加载 + Bootstrap 时淡出消息

html - 在 CSS 中显示图像和响应

html - 需要帮助更改索引页面描述文本字体大小,以便我可以将其用作标题和子标题?

css - IE 7 而非 IE8 的动画问题

html - 如何将多个媒体目标(屏幕、打印)与宽度限制相结合?

javascript - 我怎么知道我的内容是否垂直占据了整个页面?

javascript - 我无法对数组中的数字进行排序(尝试了此处编写的所有内容,但仍然不起作用)

html - 如何处理重叠的非正方形DIV的悬停问题?

html - 页脚不在应有的位置