Why isn't my list vertically aligned? Even though I set ul and li to be 100% height of the parent, they only appear to be 100% of themselves.
I'm trying to avoid using margins or padding to achieve vertical alignment. How can I make them 100% of the parent so they sit in the middle vertically?
#nav li a{
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 15px 20px;
line-height:90px; // include this
}
When defining your height relative to the parent, it typically only works with elements that have position:absolute. This is because surrounding elements' heights are normally determined by their children. If you set the children's height relative to the parent, you create an endless loop :)
Using this code will result in your list item having 100% height, but the height of your #nav element will no longer adjust as the length of the list increases.
Check out this example on jsFiddle
Alternatively, using display: table instead of the inline-block approach would maintain that functionality.
Consider utilizing table-cell for list items:
#nav ul{
display: table;
height: 90px;
}
#nav li{
display: table-cell;
height: 100%;
vertical-align: middle;
}
This method works effectively on Internet Explorer 8 and above.
In case you encounter issues, try the following:
#nav li a{
line-height:90px;
}
If problems persist, it may be due to limitations such as single-line content within the tags.
I'm trying to make the scroll bar in Chrome compatible with Firefox, but I can't figure out how to give it a border radius. Chrome scroll bar css /* Store selector */ /* width */ .lhh::-webkit-scrollbar { width: 6px; height: 56px !important ...
I found a code snippet for an image slider on codepen and integrated it into my project. However, I encountered some issues trying to center the slider in the browser window with 5% space on each side. I attempted using $(window).width(); to set the width ...
Today I dabbled in some basic HTML/CSS work. I was in the process of creating a simple navbar with floated links. Once I got it up and running, I encountered an issue that has me stumped, and I haven't been able to find a solution yet. The problem li ...
I am developing an HTML5 canvas game and encountering an issue with collision detection. The problem occurs when the ball collides with any platform - the ball's gravity should change to -1 and move upwards at the same velocity as the platforms. Howev ...
Repeating the script below 51 times, totaling 2,300 lines of code, serves the same purpose with every block having a single line different, repeated 51 times. Now there are two main questions to address for this project: 1. How can I implement a terminal ...
I set up this form to automatically submit once the page has finished loading. However, I seem to be encountering a problem where the page gets stuck in a continuous loop of reloading. HTML <body onload="document.getElementById('filters').su ...
I am attempting to showcase the bill structure on an HTML page by retrieving data in Vue and Axios. There is a table where orders are listed, with each row having a "Print" button. When this button is clicked, I want to display the specific order details i ...
Having trouble aligning six images (2 per row with text in between) to the center of your webpage? Don't worry, we've got you covered! Check out the screenshot attached for reference and let us know how we can assist. Click here for a snapshot of ...
I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...
When hovering over the IE slideshow, it moves downward. Any suggestions on why this happens? Visit development.legendarylion.com for more information. Could someone provide insight on why the slideshow increases top margin when hovered over? Explore the ...
Hey there! I was thinking about creating a container with 2 rows of 3 cards inside. I am using Bootstrap 4 for my grid and layout. If you need some card examples, check out here. <div class="container"> <div class="row"> <card-elemen ...
When dealing with the HTML input of datetime type, consider the following: Datefield: <input type="datetime-local" data-date="" data-date-format="DD MMMM YYYY, h:mm:ss"> The script below includes important code. $("input").val(moment().format(&apo ...
Is there a way to trigger my 20 second timer with the click of a button, followed by an alert after the timer ends? HTML <aside class="start-box"> <button type="submit" class="btn btn-primary btn-lg" id="toggleBtn" onclick="startCloc ...
There are a few inquiries I have about the HTML5-Canvas code provided below. The text is not visible in Firefox 3.6 (though it shows up on Chrome.) In regards to the ctx variable (ctx = c.getContext("2d")), should this variable be reutilized multiple ...
My issue involves animating 2 blinking eyes that appear on top of my navigation bar when I scroll the page. Surprisingly, this doesn't happen without the animation. How can I ensure that the animation runs smoothly under the navigation bar? I have tri ...
I am facing an issue with two Bootstrap cards stacked vertically but not being responsive in height. When I place them inside a parent div with a fixed height, the lower card containing a table exceeds the set height. To better illustrate this problem, I h ...
After a certain condition is met, I want to open another tab. Below is my bootstrap navbar code along with the jQuery script. <ul class="nav navbar-default nav-justified" role="tablist" id="navbar"> <li role="presentation" class="active"><a ...
I am encountering an issue with a timer on my checkout page. We have a 2-step checkout process, and after completing step 1, the webpage reloads to step 2, causing the timer to restart. I need the timer to continue counting without resetting. Below is the ...
I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and ...
When a user clicks on a button, I want to send the value of an input element in Angular2. What would be the most effective approach for achieving this? <input type="text" class="form-control" placeholder="Search for images..." /> <span class="i ...