CODEWITHSUNDEEP
htmlcss
Intact Dev
Intact Dev

Reputation: 506

Displaying text & images inline together

I've searched and searched, and I couldn't find a solution. I added an image into my navigation (my logo) and it is pushing the text down below the image, instead of displaying inline. How can I fix that? screenshot of problem

Here is the css for the navigation:

header.container>.container--content>.container--navigation>li>a {
  padding-left: 20px;
  font-size: 13px;
  text-transform: uppercase;
  color: #1E7194;
  transition: 0.25s;
}

Here is the HTML.

<header class="container">
<div class="container--content vertical center">
  <div class="container--navigation">
    <li><a id='1' href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <img src="logo.png">
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Portfolio</a></li>
  </div>
</div>
</header>

How can I get these two elements to display inline?

Upvotes: 0

Views: 412

Answers (3)

HandyDan
HandyDan

Reputation: 425

There are a few ways of doing so. One solution:

header.container>.container--content>.container--navigation>li>* {
  vertical-align: middle;
}

HTML:

<div class="container--navigation">
  <li><a id="1" href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><img src="http://dummyimage.com/90x90/000/fff"></li>
  <li><a href="#">Contact Me</a></li>
  <li><a href="#">Portfolio</a></li>
</div>

View Result Image

enter image description here

Upvotes: 1

Stickers
Stickers

Reputation: 78796

Wrap the image into <li>:

<li><img src="logo.png"></li>

Remove this style from your CSS:

header.container {
    height: 10%;
}

Then adjust the position of the logo if you need.

Upvotes: 1

Manish Rai
Manish Rai

Reputation: 9

you may set top with some appropriate negative value and position relative, but this may put some gap from bottom, see this quiz site testimonial section, it will appear something same.

Upvotes: 1

Related Questions