Aligning a div vertically using absolute positioning and a percentage height

<div id="logo">
    <div class="navigation-left menu"></div>
</div>

#logo {
    position: relative;
    background: #0099ff url("../img/logo.png") no-repeat center center;
    background-size: auto 55%;
    height: 18%;
}

.navigation-left {
    background-repeat: no-repeat;
    background-position: center center;
    height: 3%;
    width: auto;
    position: absolute;
    padding: 3%;
    box-sizing: border-box;
}

.menu {
    background-image: url('../img/3lines.png');
    background-size: cover;
}

I am attempting to vertically center the .navigation-left element within the #logo container. In order to achieve this, I believe I must utilize absolute positioning on .navigation-left to allow for the use of auto in the width property. This unfortunately eliminates the possibility of using vertical-align, as it changes the div's display to block. Do you have any suggestions or alternative approaches?

Answer №1

1] Use position:absolute; along with top:50%;.

2] Apply margin-top:-1.5%; or half of the element's height for proper alignment.

CSS Code:

.navigation-left {
    position: absolute;
    top: 50%;
    margin-top:-1.5%; /* Set to half of the height */
    background-repeat: no-repeat;
    background-position: center center;
    height: 3%;
    width: auto;
    padding: 3%;
    box-sizing: border-box;
}

Answer №2

To include actual content in the menu div, negative margin would need to be calculated and set manually or by using JavaScript.

One dynamic CSS3 solution involves using transforms.

Check out this updated JSFiddle demo (the fiddle has been updated regarding % header but the relevant CSS remains the same).

HTML

<div id="logo">
    <div class="navigation-left menu">Lorem ipsum dolor sit.</div>
</div>

CSS

* {
        box-sizing: border-box;
}

html, body {
    height:100%; /* it may not be necessary but is included here based on % height in OP */
}

#logo {
    position: relative;
    background: gray;
    height: 100px; /* any value */
}

.navigation-left {
    position: absolute;
    top:50%;
    -webkit-transform:translate(0%, -50%);
    height:3%;
    width: auto;
    padding: 3%;
    background-color: blue;

}

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

Store the injected HTML within a PRE tag as a variable

My question pertains to a DIV HTML element that is responsible for displaying some HTML content from a variable: <div contenteditable="true" ng-bind-html="renderHtml(currentOperation.description)" ng-model='currentOperation.description&a ...

Encountered a style property reading error

I am currently using nginx as my server and Chrome as the browser. I am attempting to change the background color of a div element. The JavaScript code works fine in a fiddle, but when I implement it into the complete markup, it does not work. When inspec ...

Is it possible to refresh text in table without clearing icons?

Is there a way to maintain icons in table rows when editing text fields from a dialog? Currently, regardless of whether I use .html() or .text(), the icons disappear. I suspect that utilizing .content() may be a solution, but I'm unsure how to impleme ...

chart for visualizing two rows with matching IDs and dates

I have been attempting to accomplish the following two scenarios: 1) When both ID and dates are the same in the chart, but the descriptions differ, I want to display them on separate lines. 2) If there is not enough room to show the row label, I would li ...

Using PHP to create redirects within an iframe

Imagine I have embedded an iframe to showcase a different website on my own site. However, when the displayed site contains a redirect that directs to other pages within its domain, this results in the entire browser being redirected to the external site w ...

What is the best way to add animation to the hide/show function?

<div class="overlay"></div> CSS: .overlay::after { position: fixed; top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 100%; transit ...

How can I incorporate the "onClick()" function within an ajax call, while still utilizing the data returned in the success message?

After successfully making an Ajax call, I would like to implement an on-click function while still utilizing the original data retrieved. $.ajax({ URL: ......, type: 'GET', success: function (res) { var Ob ...

css top navigation does not appear at the top of the webpage

My navigation bar appears to have an unexpected 5px padding issue that is causing it not to align properly at the top. To investigate, I have created a basic header.html + header.css setup as follows: <link href="css/header.css" rel="stylesheet"> &l ...

What to do when mysqli_query($connect, $query) is returning false?

As part of my university assignment, I find myself using APM that I haven't learned yet. The query runs smoothly in the command prompt, but mysqli_query is giving me trouble. I am unable to identify the issue, so I'm feeling quite stuck at the m ...

Seeking assistance with images for a website

I'm currently working on a school project where we are creating a website. However, I've encountered an issue with an image. It's a bit difficult to explain, so I've uploaded a video to help illustrate the problem. Essentially, I want t ...

Setting up a custom PrimeNG theme to match our unique style is a great way to

I am currently using the most recent version of "primeng": "^12.2.0", and I am looking to implement my own custom theme for primeng. Despite searching through numerous blogs, I have yet to find a solution. In an attempt to create my cu ...

Enhancing the appearance of individual cells in jQuery DataTables

While working with jQuery DataTables, I have successfully managed to access row data and apply styling to the entire row. Below is the code snippet used to initialize the datatable: var $dataTable = $('#example1').DataTable({ "data": data, ...

What is the best way to detect when I switch to a different tab than a specified tab using HTML and jQuery?

Here is the HTML code I am working with: <div id="tabsWithStyle"> <ul> <li><a href="#data1">Data 1 TAB</a></li> <li><a href="#data2">Data 2 TAB</a></li> <li>< ...

Creating an interactive time selection tool with two dropdown lists that are dependent on each other using HTML and JavaScript

Hi everyone, I am new to JavaScript. I am currently working on creating two dropdown lists, one for 'Start Time' and another for 'End Time'. These dropdown lists will display hours in a 24-hour format with intervals of 30 minutes. In t ...

Is there a way to prevent this picture from shifting?

I am currently revamping the content on my work website using Joomla. I have received the old copy and now I need to enhance it. The website in question is 24x7cloud.co.uk. At the bottom of the page, I aim to include an "Accreditation's" section. Howe ...

Troubleshooting AngularJS: ng-disabled functionality not functioning as anticipated

How can I disable the file input tag after a user has selected a file? HTML: <div ng-controller='firstController'> <div ng-controller='secondController'> <input type="file" name="file" upload class="theFileInp ...

How to retrieve the selected values of specific option tags using jQuery?

I have a situation where I need to select an option from a dropdown menu. Here is the code for the dropdown: <select id="customUser_id" name="customUser_id"> <option value="2" label="Friends Of Friends">Friends Of Friends</option> &l ...

Issues with the alignment of ion-grid in Ionic/Angular application

I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. ...

resizing a big image to perfectly fit the width of the screen with the help of

Is there a way to use AngularJS to automatically adjust the size of a large image to fit the screen on various devices (responsive), similar to how it is done on this website? Are there any Angular directives available for this purpose, or would I need to ...

Using HTML to load an image is not possible, as it can only be done using CSS

I am currently dealing with a CSS issue in my project. Here is the code snippet from my stylesheet: .Img{ background: url('../assets/Trump.png'); } Now, let's take a look at the corresponding HTML code: <div class="Img"> However, ...