Align the center of the div vertically within the container

I'm struggling to vertically center a div containing my logo within the navigation header. I've scoured various topics on stackoverflow, but haven't found a satisfactory solution. Does anyone have a responsive fix for this?

Explored: How to vertically center a div for all browsers?, but it didn't address my problem.

The objective is to have the logo div on the left side centered vertically, while the nav div on the right side also centered vertically.

Code Snippet:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
    vertical-align: baseline;
    outline: none;
}

#header {
    background: #00968B;
    height: 58px;
}

.logo {
    height: 58px;
}
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="header">
  <div class="container">
    <div class="logo">
        logo
    </div>
    <div class="nav">
    </div>
  </div>
</div>
</body>
</html>

htmlcss

Answer №1

Utilizing Flexbox in your design can help you achieve vertical centering of items with align-items: center;, as well as create space between the navigation and logo using justify-content: space-between;. By applying flex-flow: row wrap;, you enable the items to wrap onto a new line when they reach the edge of the header.

#header {
  background: #00968B;
  height: 58px;
}
.logo {
  height: 58px;
  background: orange;
}
.nav {
  width: 30%;
  background: yellow;
  height: 30px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
<div id="header">
  <div class="container">
    <div class="logo">
      logo
    </div>
    <div class="nav">
      nav
    </div>
  </div>
</div>

Answer №2

To achieve the desired layout, utilize absolute positioning.

Set the top position to 50% (relative to the container), then apply a translation of 50% back (relative to the element itself). This adjustment is necessary because the 'top 50%' positioning starts at the beginning of the element, requiring you to move it back by half to reach the intended placement.

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
    vertical-align: baseline;
    outline: none;
}

#header {
    background: #00968B;
    height: 58px;
    position: relative;
}

.vcenter {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
 }

.logo {
    left: 10px;
}

.nav {
    right: 10px;
 }
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="header">
  <div class="container">
    <div class="logo vcenter">
        logo
    </div>
    <div class="nav vcenter">
        nav
    </div>
  </div>
</div>
</body>
</html>

Answer №3

Try using the CSS properties vertical-align:middle and display: table-cell

.logo {
    height: 58px;  
    vertical-align: middle;
    display: table-cell;
}

.nav{
    vertical-align: middle;
    display: table-cell;
    height: 58px;
    width: 20px;
    position: absolute;
    top: 0px;
    right: 0px;
}

Check out this example on JSFiddle

Answer №4

Here's a suggestion:

.brand,
.navigation {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Another option is to remove the fixed height of the header and use padding, assuming the logo is taller than the navigation. You can then adjust the top padding of the navigation until it is vertically centered.

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

What could be causing Ajax's html() function to create a loop that never ends?

Is there a way to incorporate an animation during the database operation and update the table content in the HTML document once the operation is completed? <script> var jobj = new Object(); jobj.uid = <?php echo "'".$_SESSION['user_ ...

javascriptjqueryhtmlajax

jQuery functions correctly within jsfiddle, yet it encounters issues when utilized within WordPress

I've been experimenting with a jQuery script to grey out the screen. While it works perfectly on my jsFiddle link provided below, I'm having trouble getting it to work from within my WordPress plugin. Check out the working script on my jsFiddle ...

javascriptjqueryhtmlcsswordpress

Issues with Safari text shadow not rendering properly when extending beyond the element border

I've encountered a situation where I have a text shadow applied with the following CSS: body { background: white; } h1 { color: black; text-shadow: 100px 100px 10px black; } https://i.sstatic.net/j8OTS.png When viewing in Safari browser, t ...

csssafari

Incorporating server-side rendered components into a Vue.js parent component

I have a server-side rendered page that includes information about "orders" and a root Vue object initialized as the "parent object." Is it feasible to assign the rendered HTML orders as children of that parent Vue object? Vue.js is known for its dynamic ...

javascripthtmlvue.jsserver-side-rendering

Unable to save canvas as an image due to tainted canvas in a React application

I encountered an error after the line containing canvas.toDataURL(). An error message stating "Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvas may not be exported" was displayed. Despite attempting to search for ...

javascripthtmlreactjscanvas

Guide to getting Material-UI Dialog up and running smoothly in your React application

I'm currently working on a project using material-UI, and I'm having trouble with the Dialog component not working properly. Despite trying various solutions, I haven't been able to get it to function correctly in my React application with m ...

javascripthtmlreactjsreact-reduxmaterial-ui

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

javascriptcssselenium

"Trouble with CSS flex display aligning items with space between them

As a newcomer to flexbox and CSS, I must confess my amateur status. Please forgive any inexperienced blunders. Below is the code snippet: @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); html, bo ...

htmlcssflexbox

What is the best way to store information typically saved in a database within a SharePoint folder or the main site directory?

I've been assigned a project at work that falls outside of my usual job description. Despite not being part of the IT/WebDev departments in my company, my team is looking to improve a poorly executed process. Here's what I'm aiming to achiev ...

javascripthtmljqueryajax

PHP forms not showing up properly

I have encountered an issue where text fields created in HTML disappear when the file is converted to PHP. Why does this happen and how can I prevent it? Code: <!DOCTYPE html> <html> <head> <title>StatsCalc V1</title> <li ...

phphtmlforms

The bottom row of elements is aligned to the left in a grid that is centered

Within a div with text-align:center, I have multiple same-size blocks set to display:inline-block. | _____ _____ _____ _____ | | | | | | | | | | | | | 1 | | 2 | | 3 | | 4 | | | |_____ ...

cssgrid-layouttext-align

The I am facing an issue with Material-ui Grid where the width of the Grid item is too large and extending beyond the boundaries

I'm in the process of setting up a basic layout for a single-page application using Material-ui and React. My plan is to have a sidebar on the left-hand side and a main area on the right-hand side to display information. However, I am facing two issue ...

cssreact-nativeflexboxmaterial-ui

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

htmlcss

Coordinate the toggling of classList and changing of innerHTML with a Javascript button

I am trying to create a toggle button that displays two different messages using innerHTML, along with applying CSS classes from Bootstrap 4 and toggling classes with classList.toggle. The "Read more" message should be displayed on a blue button with an u ...

javascripthtmlcssbootstrap-4

Incorporate dc.js into your Cumulocity web application

Our team is facing a challenge while trying to integrate dc.js into our Cumulocity web application. While the standalone version works perfectly, we encounter issues when attempting to use it within Cumulocity. Below is the code for our standalone applica ...

javascripthtmlcumulocity

Guide to making a button in jQuery that triggers a function with arguments

I've been working on creating a button in jQuery with an onClick event that calls a function and passes some parameters. Here's what I have tried so far: let userArray = []; userArray['recipient_name'] = recipient_name.value; userArray[ ...

javascripthtmljquerydatatables

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

Safari may only provide audio without playing videos

When using Safari on Mac/iOS, I encountered a problem where the video would not play but only the sound could be heard. Additionally, only the first frame of the video was visible. Strangely, switching to another window or minimizing the browser seemed to ...

javascripthtmliosmacosvideo

Unable to select the uib-tabs element link with Protractor

<ul class="nav nav-pills" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-s ...

htmlangularjsjasmineprotractorangularjs-e2e

Place a div at the bottom of a flexbox while adding some padding around it

Here's what I'm dealing with: .flex-container { display: flex; justify-content: center; padding: 5%; position: relative; } .box1 { position: absolute; bottom: 0; width: 100%; height: 100%; } <div class="flex-container"> ...

htmlcssflexbox