How to align two elements in the same line in html and css?

Question

I have a webpage in which at the top there are two elements, one is homepage logo and the other is upload button. The upload button (upload button should be little bit more on the top) at this moment is not aligned in a straight line with the homepage logo.

Here is the fiddle .

The HTML and CSS codes for the homepage logo and the button are:

HTML:

<div id="upload-button">
    <ul id="horizontal-list">
        <li class="homepage-logo">
            <a href="https://www.homesail.ca/prelaunch" target="_blank">
                <img src="assets/img/Uploads/logofinalhomesail.png">
            </a>
        </li>
        <li class="upload-button">Upload</li>
    </ul>
</div>

CSS:

/* homepage logo + Upload-button start */

#upload-button {
    display: table;
}

#horizontal-list {
    margin-top: 90px;
}

ul#horizontal-list li {
    display: inline;
}

ul#horizontal-list .homepage-logo {
    margin-left: 540px;
}


/* homepage logo + Upload-button finish */

I am wondering, how I can put the homepage logo and upload button properly aligned (with upload button little bit on the top). I did make a separate class in html for upload button but unfortunately still in CSS, I am not able to align both of them together.

Answer 1

For Top:

ul li:last-child {
  vertical-align: top;
}

 #upload-button { display: table; } #horizontal-list { margin-top: 90px; } ul#horizontal-list li { display: inline; } ul#horizontal-list .homepage-logo { margin-left: 0px; } ul li:last-child { vertical-align: top; } img { width: 50px; } 

 <div id="upload-button"> <ul id="horizontal-list"> <li class="homepage-logo"> <a href="https://www.homesail.ca/prelaunch" target="_blank"> <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"> </a> </li> <li class="upload-button">Upload</li> </ul> </div> 

For Middle :

ul li a img{
  vertical-align: middle;
}

 #upload-button { display: table; } #horizontal-list { margin-top: 90px; } ul#horizontal-list li { display: inline; } ul#horizontal-list .homepage-logo { margin-left: 0px; } ul li a img{ vertical-align: middle; width:50px; } 

 <div id="upload-button"> <ul id="horizontal-list"> <li class="homepage-logo"> <a href="https://www.homesail.ca/prelaunch" target="_blank"> <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"> </a> </li> <li class="upload-button">Upload</li> </ul> </div> 

Answer 2

Just go with flex container modern way

#horizontal-list{
    display: inline-flex;
    align-items: center;
}

DEMO

Answer 3

Please change

 ul#horizontal-list li {
    display: inline;

}

to following

ul#horizontal-list li {
    display: inline-block;
    vertical-align: middle;
}

Answer 4

I centered the "Upload" with the logo on its left and centered the logo&upload horizontally.

 * { box-sizing: border-box; } body { background-color: #4676f2; } /* homepage logo + Upload-button start */ #upload-button { display: table; margin: auto; } #horizontal-list { margin-top: 90px; } ul#horizontal-list li { display: table-cell; vertical-align: middle; } ul#horizontal-list .homepage-logo { margin-left: 540px; } /* homepage logo + Upload-button finish */ /* search box start */ #myInput { background-image: url(../assets/img/Uploads/searchicon.png); background-position: 99% 50%; background-repeat: no-repeat; font-size: 16px; margin-top: 100px; width: 670px; margin-right: auto; display: block; margin-left: auto; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } /* search box finish */ /* search box dropdown start */ #myUL { list-style-type: none; padding: 0; width: 50%; margin-bottom: 200px; margin-left: auto; margin-right: auto; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a.header { background-color: #e2e2e2; cursor: default; } #myUL li a:hover:not(.header) { background-color: #eee; } /* search box dropdown finish */ 

 <!DOCTYPE html> <html> <head> <title>Search Index</title> <link rel="stylesheet" href="css/style.css"> <link rel="shortcut icon" href="assets/img/Uploads/favicon.png"> </head> <body> <div id="upload-button"> <ul id="horizontal-list"> <li class="homepage-logo"> <a href="https://www.homesail.ca/prelaunch" target="_blank"> <img src="https://s9.postimg.org/4xgk9tban/logofinalhomesail.png"> </a> </li> <li class="upload-button">Upload</li> </ul> </div> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search.." title="Type in a name"> <ul id="myUL"> <li><a href="#" class="header">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#" class="header">D</a></li> <li><a href="#">E</a></li> <li><a href="#">F</a></li> <li><a href="#" class="header">G</a></li> <li><a href="#">H</a></li> <li><a href="#">I</a></li> <li><a href="#">J</a></li> </ul> <script> function myFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html>