вертикальные выравнивающие divs - неизвестная высота

Question

Я пытаюсь вертикально выровнять 2 divs. Один определенный размер с фоновым изображением, а другой - несколько строк текста (с: перед элементом над ним). У меня нет полного контроля над количеством, потому что это зависит от ширины экрана.

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 текста.

Answer 1

Кажется мне все, что вы должны сделать, это добавить 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; 
 
}

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

Answer 2

Вы можете использовать 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;