Achieving vertical alignment of a flexbox that is stretched without relying on padding or margin

I recently implemented flexbox with align-items-stretch to ensure the borders extend to the top and bottom. However, I am now facing a challenge with vertically aligning the text within the flexbox. Due to restrictions on using margins and paddings, I cannot easily resolve this conflict. Do you have any suggestions on how to achieve vertical alignment without causing property clashes?

I attempted to use align-items-stretch and added an align-middle class within the ul li, but it did not produce the desired result and seemed to create a property conflict.

<div class="navbar-collapse collapse align-items-stretch" id="navbarCollapse" style="">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active">Home</li>
        <li class="nav-item">About Us</li>
        <li class="nav-item ">Services</li>
    </ul>
</div>

While the current code successfully stretches the borders, it does not centralize the text within the flexbox.

cssbootstrap-4flexbox

Answer №1

Would it be a good idea to set the line-height to match the height of the .nav-item?

For instance: 

.navbar-nav {
  display: flex;
  justify-content: center;
}

.nav-item {
  border: 1px solid pink;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
<div class="navbar-collapse collapse align-items-stretch" id="navbarCollapse" style="">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active">Home</li>
        <li class="nav-item">About Us</li>
        <li class="nav-item ">Services</li>
    </ul>
</div>

You can also find the code snippet on this fiddle: https://jsfiddle.net/jutvsw26/

If you need a more comprehensive explanation, please share the CSS you are currently using.

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

adjustable canvas dimensions determined by chosen images

I would like to create a canvas image based on the selected image <canvas id="canvas" ></canvas> <input type="file" id="file-input"> Using JavaScript: $(function() { $('#file-input').change(function(e) { var file ...

javascriptjqueryhtmlcsscanvas

What is the reason behind Bootstrap displaying a non-existent LESS file during inspection?

Working on a project, I decided to test the responsiveness of my CSS. Suddenly, my page underwent a style transformation, especially my navbar (built with Bootstrap) changed completely. Upon inspecting, I noticed that properties were coming from a less/nav ...

cssbootstrap-4

Alignment issue with Bootstrap 4 form fields within inline form group

My experience with Bootstrap 4 on certain pages has been quite challenging, specifically when it comes to aligning fields with labels to the left and maintaining an aligned appearance for input fields. Here is the snippet of my code: <div class="wrap ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Navigating through a diagonal path

Struggling to craft a diagonal navigation system similar to the images below. Despite its seemingly simplicity, I'm stuck investing too much time in figuring it out. My goal is for the menu container to smoothly reveal from right to left when clicking ...

javascripthtmlcss

Positioning two divs side by side, with two more below in the following row

I am attempting to align multiple div elements with a width relative to the screen size. However, when I try to float them next to each other, they shift to the right and display under each other. I have experimented with applying display: inline-block; a ...

htmlcss

What could be causing the dropdown menu to be unresponsive in my HTML and CSS code?

I am struggling to figure out why my drop-down menu is not appearing on my website. Even after removing the 'hidden' property, it still doesn't look right when I hover over the 'servicios' tab. I can't seem to pinpoint the iss ...

htmlcss

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

I am having an issue where the styling does not change the display to block when hovering. Any insights or feedback would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="t ...

htmlcss

Can the PHP stylesheet import be configured to exclude a specific string?

Can I import a PHP stylesheet named style.php into my HTML document? Is there a way to delete certain strings from style.php, such as <style> tags, before importing it using traditional methods like <link>? ...

phpcssimport

Show secret information once radio button is selected through JQuery code

I am dealing with two checkboxes ABC XYZ When the ABC checkbox is checked, the abc content div is displayed, and when the XYZ checkbox is checked, the xyz content div is shown. Everything works fine, except that if the ABC checkbox is checked by defaul ...

jqueryhtmlcss

Moving SVG fill in a continuous loop

After encountering a strange issue not too long ago, I decided to continue my CSS animation experiments with SVG, specifically focusing on colorization. Initially, I thought that applying the animation rules directly to the <g> tag grouping all the ...

csssvgcss-animations

Set the position of a div element to be fixed

I am currently working on a straightforward application that requires implementing a parallax effect. Here are the methods I have experimented with so far: - Inserting an image within a div with the class parallax. - Subsequently, adding an overlay div ...

javascripthtmlcsssassparallax

Arranging divs for dynamic movement with window resizing

Seeking a solution to have words on my background image function as links, I planned to place transparent divs over the words in the background. However, struggling with positioning these divs accurately as the window is resized. Code Snippet: <div id ...

htmlcss

Is it possible for me to showcase a grid or table within the div css class with the assistance of bootstrap

I need help figuring out the best way to present a large number of fields to the user effectively. I have experimented with using a datatable, but since I also have images to display, I am considering utilizing a grid instead. Here is an example of how my ...

bootstrap-4asp.net-core-mvc

Is it feasible to generate a realistic arrow using CSS and then rotate it?

Can a fully functional arrow be created using CSS alone? Here is the method I used to create just the arrowhead: http://jsfiddle.net/2fsoz6ye/ #demo:after { content: ' '; height: 0; position: absolute; width: 0; border: 10p ...

css

Completed Animation with Callback in AngularJS CSS

Currently working with AngularJS and hoping to receive a notification upon completion of an animation. I am aware that this can be achieved with javascript animations such as myApp.animation(...), but I'm intrigued if there is an alternative method wi ...

javascriptcssangularjsanimation

Is my website broken due to Internet Explorer?

The progress on my current website project has been smooth so far, but I'm encountering an issue when testing it in Internet Explorer. Whenever I try to view it in IE, the layout breaks completely. You can check it out at . I've attempted using C ...

htmlcssinternet-explorercross-browsergoogle-chrome-frame

Positioning of buttons within a div

I am currently designing an inspiration post style: https://i.stack.imgur.com/I5J0H.png However, I am encountering some challenges while creating it: The buttons are not rounded when the window size is changed Social icons are not being displayed I am ...

jqueryhtmlcssbootstrap-4

The Facebook comment section is taking control

<div class="fb-comments" data-href="https://www.facebook.com/pages/Societ%C3%A0-Ginnastica-Triestina-Nautica/149520068540338" data-width="270" data-num-posts="3"> I'm having trouble with the comment box extending past my div height and overlapp ...

phphtmlcssfacebook

merge various CSS styles into a single one

My div has a mix of styles applied to it. <div class="alert alert-secondary login-alert" role="alert">Please contact the administrator to receive credentials!</div> The styles alert and alert-secondary are default styles from bootstrap 4, whi ...

cssbootstrap-4

Problem with aligning divs in Bootstrap

I am currently facing a challenge when it comes to aligning my div in Bootstrap 3. My goal is to achieve the following: I have experimented with pull and push commands, but it seems like I still need more practice. Code: <div class="container"> ...

csstwitter-bootstrap-3sidebarcol