ロゴを複製する際のCSSスタイリングの問題

Question

私はこのデザインを自分のロゴに複製しようとしていますが、CSSには苦労しています。これまでのところ、私は以下のコードを書いていますが、成長ハッカーと起業家のために積み重ねられたテキストを作成するのに苦労しています。ご指摘がありましたら、大変感謝しています。

<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">Elliott Davidson | <span class="logo-growth-hacker">Growth Hacker</span><br><span class="logo-entrepreneur">Entrepreneur</span></a> 

.navbar-brand 
    font-weight: bold 
    font-size: 1rem 
    text-transform: uppercase 
    color: $light-grey 
    padding: 30px 30px 30px 0px 

.navbar-default .navbar-brand 
    color: $light-grey 

a.navbar-brand.navbar-brand-fix 

    span.logo-growth-hacker 
    font-weight: 200 
    font-size: 0.5em 
    text-transform: none 
    vertical-align: text-top 

    span.logo-entrepreneur 
    font-weight: 200 
    font-size: 0.5em 
    text-transform: none 
    margin-top: -18px 
    float: inherit 
    margin-left: 182px 
    padding-top: 5px 

Answer 1

を始めることがここで私はそれを行うだろう方法です。それに応じて行レイアウトとスタイルを使用して2つのflex列を作成します。あなただけのちょうどこのような何か非常にロゴの中心のためにSVGを使ったほうが良いかもしれ、と述べ

a { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    background: linear-gradient(to right, #666, #666 50%, #444 50%, #444); 
 
    color: white; 
 
    padding: 1rem; 
 
    text-decoration: none; 
 
    font-size: 1.25rem; 
 
} 
 
.col { 
 
    border-left: 1px solid white; 
 
    padding: 0 0 0 1rem; 
 
    margin: 0 0 0 1rem; 
 
    font-size: .6rem; 
 
} 
 
a:hover .col { border-color: red; }

<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>"> 
 
    <span class="name">Elliott Davidson</span> 
 
    <span class="col"> 
 
    Growth Hacker<br> 
 
    Entrepreneur 
 
    </span> 
 
</a>

Answer 2

うまくいけば、これはあなたが:-)

.logo { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.logo > * { 
 
    flex: 0 0 auto; 
 
} 
 
.title { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.title > * { 
 
    flex: 0 0 auto; 
 
}

<div class="logo"> 
 
    <div class="name"> 
 
    Elliott Davidson 
 
    </div> 
 
    <div class="title"> 
 
    <div class="funText"> 
 
     Growth Hacker 
 
    </div> 
 
    <div class="position"> 
 
     Entrepreneur 
 
    </div> 
 
    </div> 
 
</div>