How to make all the characters stay in the same height

Navigation
1

I want to put all the elements of a div at the same height as in this image:

Somineislikethis:

MyHTML:

<divclass="banner">
<div class="container"> 
    <div class="conteudo-banner">
        <h1>Kerline</h1>
        <div class="code-logo">
            <span>&lt;</span>
            <span>/</span>
            <span>Code</span>
            <span>&gt;</span>
        </div>
    </div>
</div>

My CSS: 

.banner{
background-color: #FFFFFF;
padding: 98px 0 240px;
}

.conteudo-banner{
    margin-top: 65px;
}

.conteudo-banner h1{
    font-family: techno_hideo;
    font-size: 13.5em;
    color:#000000 ;
    text-align: center;
}

.code-logo{
    position: absolute;
    left: 50%;
    top: 20em;
}

.conteudo-banner .code-logo span{
    font-size: 6.5em;
    text-transform: uppercase;
    letter-spacing: -3px;
    font-weight: 700;
}

.conteudo-banner .code-logo span:nth-child(1),
.conteudo-banner .code-logo span:nth-child(2),
.conteudo-banner .code-logo span:nth-child(4){
    color:#292570;
    font-size: 7.5em;
    font-weight: 700;
}

.conteudo-banner .code-logo span:nth-child(3){
    font-style:italic;
}
    
asked by anonymous 20.10.2017 / 19:02

1 answer

2

I did as follows: 

.conteudo-banner .code-logo span:nth-child(2){
    font-size: 6em;
    display: inline-block;
    position: relative;
    top:-4px; 
}

font-size - Regulates font size
display - Leave the span on the same line but with options block
position - Possible to manipulate element up and down
top - Distance from top

So you can align according to your font, as the font I'm using is different it's easier for you to make the adjustments.

I made a small example by aligning / (Bar): link

    
20.10.2017 / 19:38
REINF - Invalid Signature Dynamic properties in vue 2