CODEWITHSUNDEEP
csstwitter-bootstrap
Veljko Stefanovic
Veljko Stefanovic

Reputation: 511

How to align two line text inside navbar-brand with image

I got navbar-brand anchor which have inside an image and two line text. Problem is that when text line goes in new line, it gets to much line height. I tried changing everything including said line height, but to no avail.

Here is navbar markup:

<a class="navbar-brand brand" href="#"><img src="orange_circle.png" style="vertical-align:top;" class="logo inl"><div class="inl">COMPANY
                    <div>NAME</div></div></a>

Here is my css for it:

.brand{
    text-decoration: none;
    color: black;
    font-family: Montserrat;
    font-weight:bold;
}

.logo{
    width: 32px;
}

.inl{
    display: inline !important;
    margin-left: 5px;
}

.navbar-brand {
    white-space: pre;
}

div.inl>div {
    display:inline-block;
    color: orange;
    width: auto;
}

Here is how it looks now: now

Here is how should look: enter image description here

Problem occurs only when words are not on the same line, which is what i need.

Upvotes: 1

Views: 1621

Answers (2)

KeiZ
KeiZ

Reputation: 31

You can simply use flexbox: 

.brand{
    display:flex;
    align-items: center;
}

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 192006

Set the padding-left on the link to create an area for the log, and use a background image (I've used a gradient) to display, and place the logo:

.brand {
  display: inline-block;
  text-decoration: none;
  color: black;
  font-family: Montserrat;
  font-weight: bold;
  padding-left: 42px;
  background: radial-gradient(circle, darkorange, darkorange 50%, transparent 50%) no-repeat 0 50%;
  background-size: 42px 42px;
}

.name {
  color: darkorange;
}
<a class="brand" href="#">
  <div class="inl">COMPANY</div>
  <div class="name">NAME</div>
</a>

Upvotes: 3

Related Questions