Align the content vertically in two adjacent divs

I have a logo and a menu in two separate divs side by side.
The logo is on the left and the menu is on the right.

I am trying to vertically align the menu in the right div with the logo in the left div.
Here is the code snippet:

<div id="header">
    <div class="logo">
        image.jpg
    </div>
    <div class="navigation">
    link 1  | link 2 | link 3
    </div>
</div>

And here is the CSS code:

#header{
padding: 3% 0 2% 0;
width: 100%;
display:table;
}

.logo{
display:inline-block;
max-width:19%;  
text-align:left;
}

.navigation{
display:inline-block;
text-align:right;
width:81%;
}
htmlcss

Answer №1

Flexbox is the solution you're looking for. Take a look at this code snippet.

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo {
    flex: 0 0 20%;
}

.navigation {
    flex: 0 0 80%;
}

Answer №2

Here is the solution you are looking for:

#header {
  font-family: sans-serif;
  padding: 3% 0 2% 0;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.logo {
  display: inline-block;
  max-width: 19%;
  text-align: left;
}

.navigation {
  display: inline-block;
  text-align: right;
  width: 81%;
}
<div id="header">
    <div class="logo">
        image.jpg
    </div>
    <div class="navigation">
    link 1  | link 2 | link 3
    </div>
</div>

Answer №3

Switch out the inline-block for table-cell and you'll see it in action.

Answer №4

If you're looking for an alternative to the CSS flexbox solutions...

Check out this example on JsFiddle

HTML:

<div id="header">
    <div class="logo">
        <img id="logoimg" src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png">
    </div>
    <div id="navigation">
    link 1  | link 2 | link 3
    </div>
</div>

JS:

$(document).ready(function(){
    var imgHeight = $("#logoimg").height();
    var navHeight = $("#navigation").height();
    var topMargin = (imgHeight-navHeight)/2;
    $("#navigation").css({"margin-top":topMargin});
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make sure to include the target blank attribute in your custom PHP code for

Is there a way to open a link in a new window? <?php if(get_option_tree('rss')) { ?> <a href="<?php get_option_tree('rss',$theme_options,'true'); ?>" id="rss" title="RSS" class="tt_top"></a><?php } ...

phphtmlhyperlink

` `Spinning graphics and written content``

I am looking to create a dynamic element on my website where an image and corresponding text block rotate every few seconds. An example of what I am envisioning can be seen on this website: While I know how to implement a javascript for rotating images, I ...

phpjavascripthtmlcss

custom gradient generator for jquery and css3

Is there a jQuery CSS3 plugin available that can handle cross-browser gradients? I've noticed that most gradient plugins out there involve creating multiple elements. Thank you. Edit: I apologize for any confusion - I'm not attempting to force ...

jquerycssgradient

Can sweetalert2 be used as a tooltip?

I have a query, is it feasible to include a tooltip in the alert message? Alternatively, could there be another tooltip option available? Swal.fire({ title: '<strong>An example with HTML tags</strong>', icon: 'info', ...

javascripthtmltypescriptsweetalertsweetalert2

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

javascripthtmlcss

Tips on saving php variable content in HTML "id"

Three variables are used in PHP: message_id, message_title, and message_content. Their content is stored inside HTML 'id' for later use with jQuery. Example: Variables: $id_variable = $rows['id_mensagem']; $message_title_edit = $rows ...

javascriptphpjqueryhtml

Using AJAX to submit data and displaying the results in either an input field or a div

Having a PHP script to track button clicks to a text file <?php if (isset($_POST['clicks1'])) { incrementClickCount1(); } function getClickCount1() { return (int) file_get_contents("count_files/clickcount1.txt"); } function increme ...

phpjqueryhtmlajax

Moving from one section to the next within a web page

I am looking to add animation to my web app. When clicked, I want to move only the ID table column from one div to another div while hiding the other column. However, I am struggling with figuring out how to animate the movement of the ID column (from the ...

javascripthtmlcssangularjs

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted

Is there a way to pause an animation at the 50% mark for 2 seconds and then resume? P.S. The setInterval method is not recommended! function pauseAnimation() { document.getElementById("0").style.animationPlayState = "paused"; }; var pauseInterval = set ...

javascripthtmlcsscss-animationskeyframe

In what way does Angular incorporate _page-theme.scss assets?

The Angular Material Documentation homepage includes a specific scss file: https://github.com/angular/material.angular.io/blob/master/src/app/pages/homepage/_homepage-theme.scss Although this scss file is not directly imported into the component's ...

javascriptcssangulartypescriptsass

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...

htmlcssbootstrap-4horizontal-scrolling

What is the best way to store plain HTML text in a database?

Currently, I am working on PHP source code to insert the page created using Quill text editor. Although the text editor data insertion is working fine, it is not inserting plain text as desired. My goal is to insert HTML plain text instead. Below is the J ...

phphtmlmysqli

Is there a way to restrict form choices depending on the previous entry, while also keeping all fields, including file selections, filled out upon submission?

Currently, I have a form set up as follows: <form name="estimate" action="live_preview.php" method="post"enctype="multipart/form-data"> <label for="file">Upload File 1:</label> <input type="file" name="file" id="file"/> ...

phpjqueryajaxhtml

Image missing aria-label attribute

I am facing an issue with getting the aria-label to display on my image. Despite checking my code, I cannot figure out why it is not working. Any ideas on what might be missing? Here is the code from my NextJS app: The svg in my public folder. <?xml v ...

htmlcssreactjsnext.js

Compel the content element to scroll forcefully

I've scoured the vast expanse of the internet, but my search has been fruitless. Here lies my dilemma. I want my <main> element to have a scrollbar with overflow-y:scroll. No scrollbar on the body, just on the main element. For a visual repr ...

css

A concise way to write an else if statement in Javascript and jQuery

Is there a way to make this code more concise? It works perfectly fine, but it's too lengthy. Basically, the code involves two dropdown lists where the user selects options, and based on their selection, values appear in two textboxes. The catch is th ...

javascriptjqueryhtml

Guide on positioning two background images next to each other on a page?

Looking to replicate a design using CSS that requires editable background images via a CMS. The left image needs an angled/slanted right edge with a gold border, while the right image should be parallel. Content placement is not a concern at this stage. V ...

htmlcss

Creating a CSS button that spans multiple lines within a paragraph while maintaining the appearance of an anchor tag, even in

UPDATE: The solution provided by @Dinesh karthik works well, but unfortunately it does not support IE11. I am trying to make it compatible with IE11 as well. Is there a way to make a button look like an anchor tag within a paragraph? I want the button to ...

htmlcss

Control the button's activation status by accepting or unaccepting the two checkbox conditions

In my search through stackoverflow for help on enabling/disabling a button conditionally, I found some assistance but nothing quite matched what I needed. My situation involves two checkbox conditions rather than just one. The button should only be enable ...

javascriptjqueryhtmlcheckbox

Access the camera feed on a custom webpage using simple authentication

I'm looking to integrate a live camera feed into my website. When I visit the following URL, I can view the camera stream: http://user:pwd@ip/cgi-bin/faststream.jpg?stream=full&html However, when I try to embed the image on my site using the fo ...

jqueryhtmlcamera