TransWikia.com

how to align image and label side by side in html?

Stack Overflow Asked by Jeet Viramgama on December 27, 2021

Look at the image

I want my logo on the left side and navigation bar on the right side.
I tried img outside nav class and it did align to left but i want nav and my logo together. How do i do this? Thank you.

Here is my Code:

.img {
  text-align: left;
  background-position: left;
}

.nav {
  border-bottom: 1px solid lightgray;
  text-align: right;
  line-height: 70px;
  height: 70px;
}
<div class="nav">
  <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
  <label for="toggle"> ☰ </label>
  <input type="checkbox" id="toggle">
  <div class="menu">
    <a href="#">Home</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
    <a href="#">Share</a>
    <a href="#">Useless</a>
  </div>
</div>
csshtml

3 Answers

just use float to align content left or right

.img {
      float: left;
}
.nav {
    border-bottom: 1px solid lightgray;
    line-height: 70px;
    height: 70px;
}
.menu{
    float: right;
}
<!DOCTYPE html>
<html>
<head>
  <title>Nav</title>
</head>
<body>
<div class="nav">
  <div class="img">
        <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
        <label for="toggle"> &#9776; </label>
        <input type="checkbox" id="toggle">
        </div>
        <div class="menu">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">Contact</a>
            <a href="#">Share</a>
            <a href="#">Useless</a>
        </div>
    </div>
</body>
</html>

Answered by Umutambyi Gad on December 27, 2021

Here's a good solution. The checkbox (#toggle), I think, will be hidden by default.

.img {
    text-align: left;
    background-position: left;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgray;
    text-align: right;
    line-height: 70px;
    height: 70px;
}

.nav label {
  margin-right: auto;
}

#toggle {
  display: none;
}
<div class="nav">
       
        <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
        <label for="toggle"> &#9776; </label>
        <input type="checkbox" id="toggle">

        <div class="menu">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">Contact</a>
            <a href="#">Share</a>
            <a href="#">Useless</a>
        </div>
    </div>

Answered by s.kuznetsov on December 27, 2021

Try writing the attached code, it will surely work but if it doesn't let me know in the comments, I will try my best to help you.

In this code I have have made a new <div> and added float:left; to it and removed some inline and internal CSS.

Your code was not getting the job done because you have added opposite properties to parent (.nav) element and child (menu) element.

.img {
      float: left;
}
.nav {
    border-bottom: 1px solid lightgray;
    line-height: 70px;
    height: 70px;
}
.menu{
    float: right;
}
<!DOCTYPE html>
<html>
<head>
  <title>Nav</title>
</head>
<body>
<div class="nav">
  <div class="img">
        <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
        <label for="toggle"> &#9776; </label>
        <input type="checkbox" id="toggle">
        </div>
        <div class="menu">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">Contact</a>
            <a href="#">Share</a>
            <a href="#">Useless</a>
        </div>
    </div>
</body>
</html>

Answered by shubh1834 on December 27, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP