How this div align the middle?

Question

I have this sample:

link

I want to align second div to be middle of first div...I tried to do this with vertical-align:middle but not working.

It is because we put the container display: table ?

CODE HTML:

<div class="container-logo">
    <div class="logo">LOGO</div>
    <div class="profile-name">NAME</div>
</div>

CODE CSS:

.container-logo {
    display: table;
    margin: 0 auto;}

.logo{
        clear: none;
    float: left;
    height: 57px;
    width: auto;
    background:red;
}

.profile-name{
    float: left;
    width: auto;
    color: blue;
    /* line-height: 22px; */
    font-size: 14pt;
    background:aqua;
    font-family: Montserrat regular;
}

What is the problem it does not work ... Can you give me some advice please?

Thanks in advance!

EDIT:

My items must be in line and have the same height ... I just want the second div to put it in the middle of the first ... exactly the same height

Answer 1

try to remove float:left from the classes .logo and .profile-name with display:table-cell will help you fixing this.. like the below

CSS

.logo{
        clear: none;
    display:table-cell;
    vertical-align:middle;
    height: 57px;
    width: auto;
    background:red;
}

.profile-name{
    display:table-cell;
    vertical-align:middle;
    width: auto;
    color: blue;
    /* line-height: 22px; */
    font-size: 14pt;
    background:aqua;
    font-family: Montserrat regular;
}

Fiddle Demo

Answer 2

<div class="container-logo">

Replace the class name.

 .container-logo { display: table; margin: 0 auto; vertical-align: middle; } .logo{ clear: none; /*float: left;*/ height: 57px; width: auto; background:red; display: table-cell; vertical-align: middle; } .profile-name{ /*float: left;*/ width: auto; /* line-height: 22px; */ font-family: Montserrat regular; display: table-cell; vertical-align: middle; } .profile-name p{ font-size: 14pt; background:aqua; color: blue; padding:2px; }

 <div class="container-logo"> <div class="logo">LOGO</div> <div class="profile-name"> <p>NAME</p> </div> </div>

Answer 3

Use table-cell for inner divs and remove floats:

 .container-logo { display: table; margin: 0 auto; } .logo{ clear: none; /* float: left; */ height: 57px; width: auto; background:red; } .profile-name{ /* float: left; */ width: auto; color: blue; /* line-height: 22px; */ font-size: 14pt; background:aqua; font-family: Montserrat regular; } .container-logo > div{ display: table-cell; vertical-align: middle; }

 <div class="container-logo"> <div class="logo">LOGO</div> <div class="profile-name">NAME</div> </div>

Or inline-block if you want to get like this fiddle .

Answer 4

If you want your second div inside first one then write your html like this

<div class="container-logo">
 <div class="logo">LOGO
   <div class="profile-name">NAME</div>
 </div> 
</div>

and in your css do something like this

.container-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    max-width: 50%;
    padding: 15px;
}

.logo{
    clear: none;
    float: left;
    height: 57px;
    width: auto;
    background:red;
}

https://jsfiddle.net/hq8q8eqg/7/