vertical align divs - unknown height

Question

I am trying to vertically align 2 divs. One defined size with background-image and the other is multiple lines of text (with a :before element above it). I don't have full control over how many because it depends on the width of the screen.

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

What I have makes it beside each other, but not centred. I want something without a defined height for the 'text' div.

can you make a [jsfiddle](http://jsfiddle.net/) demonstrating the case? — Jakemmarsh, Aug 10 '15 at 23:04
http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image I thinks this should help you — Yi Zhou, Aug 10 '15 at 23:11
The examples used, all have a defined height. The length of text may only be on one line, 2 or 3 depending on how wide the user makes the screen. I want it to remain vertically centred beside the nav-bar brand div — user3550879, Aug 10 '15 at 23:19

lomas09 · Answer 1 · 2015-08-10T23:27:35.460

1

You can use flexbox to solve this problem. You did not provide a live example but here is what I imagined:

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

Just use align-items: center;

edited Aug 10 '15 at 23:27

answered Aug 10 '15 at 23:12

lomas09

1,114
4
12
28

I am using safari right now and your code doesn't work as you described – user3550879 Aug 10 '15 at 23:15
@user3550879 For older versions of Safari, try adding `display: -webkit-box;` above where you have `display: flex;`. [More info](https://css-tricks.com/using-flexbox/). – Maximillian Laumeister Aug 10 '15 at 23:24
@user3550879 Added Cross-Browser Solution. Tested it in Safari and it works now – lomas09 Aug 10 '15 at 23:28
the change you made, ruins the alignment in safari (the snippet is no-longer aligned) – user3550879 Aug 11 '15 at 01:16

score 0 · Accepted Answer · answered Aug 10 '15 at 23:28

0

Seems to me all you have to do is add vertical-align:middle to both .navbar-brand and .brand-text (with the caveat of moving the margin-top: 10px to .brand-wrap from .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;
}

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

answered Aug 10 '15 at 23:28

Adam Jenkins

51,445
11
72
100

That only looks centred cause of the 10px padding on top – user3550879 Aug 10 '15 at 23:32
There's no `10px` padding on the top - there's a `10px` margin, and I kept it there because your code appeared to want a `10px` margin on the top of `.brand-wrap`. Feel free to remove it and you will see that regardless of the margin, `.brand-text` is now vertically centered to `.navbar-brand` and it will remain so, regardless of how much content you put in `.brand-text` or `.navbar-brand`. Because you had declared both elements to be `inline-block` all you need to do is add `vertical-align:middle` to both of them (and remove any margin on `.navbar-brand` or `.brand-text`) – Adam Jenkins Aug 10 '15 at 23:36
I tired (which is why I thought is was the margin, i mistakingly said padding you are correct) but vertical middle doesn't seem to work for me anyway – user3550879 Aug 11 '15 at 01:12

vertical align divs - unknown height

2 Answers2