CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 3999

Can't get image and text to be on the same line

I want both the "PaperKlip" text and the image to be on the same line. I tried having them both use display: inline; but this doesn't seem to be working. I want them to be aligned on the right side of the screen with the image all the way to the right, and the text directly to the left of it.

Instead, this is how they're showing up, one on top of the other:

enter image description here

HTML:

<a class="navbar-brand" href="./index.html">PaperKlip</a>
<img src="images/paperklip.jpg" height="70px" width="70px" class="img-responsive" id="navbar-brand-logo" alt=""/>

CSS:

.navbar-brand {
    display: inline;
    color: #FFF !important;
    text-transform: none;
    margin: 0px;
    font-size: 37px;
    padding: 20px 0px 0px;
    font-family: Roboto-thin;
    font-weight: 400;
}

#navbar-brand-logo{
    display: inline;
}

Upvotes: 0

Views: 46

Answers (1)

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

I simply add float:right to your HTML tags and reverse the ordering in your HTML, and everything is what you want. Here is a plunker but I think there is something else in your CSS that affect these HTMLs, because I did not have text on top of image when I applied your codes.

HTML:

<img src="images/paperklip.jpg" height="70px" width="70px" class="img-responsive" id="navbar-brand-logo" alt=""/>
<a class="navbar-brand" href="./index.html">PaperKlip</a>

and here is CSS: 

.navbar-brand {
  display: inline;
  color: black;
  text-transform: none;
  margin: 0px;
  font-size: 37px;
  padding: 20px 0px 0px;
  font-family: Roboto-thin;
  font-weight: 400;
  float: right;
}

#navbar-brand-logo{
  display: inline;
  float: right;
}

Upvotes: 1

Related Questions