What is the best way to align content in the center of a list item?

My current HTML structure is as follows:

<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li *ngIf="showDeltaButton()">
        <a class="col-sm-1" pTooltip="delta geometry" tooltipPosition="bottom" (click)="showDeltaGeometry()">
            <i [style.color]="navBar.getIconStyle(showDelta)" class="fa fa-window-restore"></i>
            <span [style.color]="navBar.getIconStyle(showDelta)">Delta</span>
        </a>
    </li>

    <li>
        <a class="col-sm-1" pTooltip="model" tooltipPosition="bottom" (click)="openCameraPanel()">
            <i [style.color]="navBar.getIconStyle(showCameraPanel)" class="fa fa-camera-retro"></i>
            <span [style.color]="navBar.getIconStyle(showCameraPanel)">Camera</span>
        </a>
    </li>


    ...

    <li>
        <a class="col-sm-1" pTooltip="close" tooltipPosition="bottom" (click)="closeDialog()">
            <i class="fa fa-close"></i>
            <span>Close</span>
        </a>
    </li>
</ul>

When styled with Bootstrap 4, it looks like this:

https://i.sstatic.net/Pk79X.png

However, I want the layout to be similar to this:

https://i.sstatic.net/SOchq.png

I am trying to achieve a design where the 'a', 'i', and 'span' elements are horizontally centered inside the 'li' element. Can anyone suggest how I can achieve this?

htmlcssbootstrap-4

Answer №1

Just a heads up: I found the solution to my own question by diving into the bootstrap 4 documentation. You need to include the class "text-center" to both the i and span elements. Sharing this here in case it helps someone else dealing with a similar issue.

HTML:

<ul class="navbar-nav">
        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
            <li *ngIf="showDeltaButton()">
                <a class="col-sm-1" pTooltip="delta geometry" tooltipPosition="bottom" (click)="showDeltaGeometry()">
                    <i [style.color]="navBar.getIconStyle(showDelta)" class="fa fa-window-restore text-center"></i>
                    <span [style.color]="navBar.getIconStyle(showDelta)" class="text-center">Delta</span>
                </a>
            </li>

            <li>
                <a class="col-sm-1" pTooltip="model" tooltipPosition="bottom" (click)="openCameraPanel()">
                    <i [style.color]="navBar.getIconStyle(showCameraPanel)" class="fa fa-camera-retro text-center"></i>
                    <span [style.color]="navBar.getIconStyle(showCameraPanel)" class="text-center">Camera</span>
                </a>
            </li>

            ...

            <li>
                <a class="col-sm-1" pTooltip="close" tooltipPosition="bottom" (click)="closeDialog()">
                    <i class="fa fa-close text-center"></i>
                    <span class="text-center">Close</span>
                </a>
            </li>
        </ul>
    </ul>

CSS:

li>a>i.fa {
    display: block;
}

li>a>span {
    display: block;
}

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

Changing class from 'current-menu-item' to 'active' for filtering

I'm currently developing a unique theme inspired by the Roots Theme, which now incorporates Twitter Bootstrap as its framework. One challenge I encountered is that it utilizes a custom 'walker' for navigation, making it difficult to simply ...

phpcsswordpresstwitter-bootstrapwordpress-theming

Main Article Holder containing Image overlaid with Post Details

I'm struggling to achieve something seemingly simple but can't quite get it to work. My goal is to display article previews on my website in a tiled format. For example, the tiles would have a fixed height and width, say 300px by 300px. I&apos ...

htmlcss

Ensuring consistency in layout for logo and navigation links using Bootstrap

I've tried countless techniques, but I'm struggling to align the logo and li elements properly in the header. Additionally, increasing the height of the header has proven to be a challenge. Despite experimenting with various methods, I have not a ...

htmlcsstwitter-bootstrap

Setting up Bootstrap 4 in VS 2017 and Angular 4

I am embarking on my initial side project and attempting to utilize the following tools: .Net Core 2 MVC Angular 4 Bootstrap 4 Visual Studio 2017 I successfully followed this tutorial to get the Angular app up and running: Although I have experience wi ...

angularvisual-studio-2017.net-corebootstrap-4

I'm having trouble with the jQuery AJAX load.() method, could you please help me figure out what I'm doing incorrectly?

I am trying to implement the load() method in my HTML document to load text from a .txt file. Despite having both files on my desktop, I can't seem to figure out what's wrong with my code. Here is what I have so far: HTML: <script> ...

jqueryhtmlajax

Preventing functionality with Jquery hashtag in the URL

My Jquery code successfully shows and hides divs with a button click, but it seems to only work for the first two clicks. After that, a hashtag appears in the URL and the script stops functioning. I attempted to add `e.preventDefault()` at the beginning ...

javascriptjqueryhtmlcss

Implementing function invocation upon scroll bar click

I have a Div element with a scroll bar. When a user clicks the scroll bar, I want to call a function based on that click event. How can I achieve this? On the client side, I am using jQuery and on the server side, I am using PHP. I am familiar with makin ...

phpjqueryhtml

Interactive Vue.js canvases that adapt and respond to various

I am currently working on adjusting my canvas to fit within its container in a Vue component. When I call resizeCanvas() in the mounted hook, I notice that the container's height and width are both 0. How can I create a canvas that dynamically fits it ...

javascriptcssvue.jshtml5-canvas

Automatically refresh a table within a webpage with updated database information without the need to manually refresh the

I'm a beginner in PHP and AJAX. The issue I am currently encountering is displaying a table on a JSP page and wanting to auto-update the table without refreshing the page every 10 seconds. I retrieve values from a database using a PHP page Below is t ...

phphtmlajax

Resolving the issue: "Unable to destructure the 'Title' property of 'fac' as it is undefined" in React JS

I'm facing an issue with react-bootstrap mapping in my component whereby I encounter the following error: Cannot destructure property 'Title' of 'fac' as it is undefined. It seems like there's an error when trying to de ...

htmlreactjs

What methods does DevTools offer for identifying the font used in an SVG?

Can anyone help me identify the font used in an SVG marker displayed on a Google Maps surface? I am specifically referring to the number 9 on a blue marker in this codepen. The label has these properties: label: { text: "9", color: "white", f ...

htmlcsssvggoogle-chrome-devtoolsfirefox-developer-tools

Ways to position an absolute element in the middle of two CSS Grid cells

Is it possible to position an element with position: absolute between two grid cells, where half of the element is on the sidebar and the other half is on the rest of the page? The challenge arises when there is overflow set on both the sidebar and the pag ...

css

I encountered an issue with my shopping cart while using ReactJS

this is the App.js file import React from "react"; import ListProduct from "./listProduct"; import ListOrder from "./listOrder"; import pizza from "./pizza.jpg"; import './style.css' import { Container,Row,Col,Button } from 'react-boo ...

javascriptcssreactjsreact-bootstrap

In HTML, the size and position of an <a> element cannot be altered or adjusted

I am having trouble with an anchor element that is contained within a div. No matter what I try, I cannot resize or move it up or down without it covering its sibling element. I have attempted using transform-translate and margin properties, but to no avai ...

htmlcsssassscss-lint

SB Admin 2 menu with multiple levels does not collapse as expected

I'm in the process of integrating the menu from the sb admin 2 template into my Ruby on Rails application: As I gradually added components to test functionality, I successfully implemented the top and side nav bars. However, I encountered an issue wi ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Selenium or Splinter: Is it possible to retrieve the current HTML page after clicking a button?

My attempt to scrape the website "" proved challenging as I discovered that the page dynamically updates. Clicking the "More" button reveals new content, but using splinter didn't automatically update the browser.html with the latest data. Is there a ...

pythonhtmlseleniumweb-crawlersplinter

What are the steps to incorporating the League Gothic font into my website design?

Is there a way to incorporate League Gothic font into my website design? Visit the League Gothic GitHub repository Appreciate any guidance on this matter, ...

htmlcssfonts

Utilizing CSS for a responsive background image

While constructing a website, I encountered an issue where the client is using a mobile device and I want to prevent them from loading a particular background image. For larger screens, my plan is to incorporate approximately 5 images with different resolu ...

htmlcss

Prevent the CSS and Jquery Slideshow from endlessly looping

I've just started working with JQuery and I'm having trouble figuring out how to prevent my jquery and css slideshow from continuously looping. Below is the code snippet: HTML: <div id="slideshow"> <div> <img src="Slide1.gi ...

jqueryhtmlcssslideshowinfinite-loop

Learning to render a hexagon on an HTML canvas using TypeScript

After drawing a hexagon on canvas in HTML, I encountered an issue with the translate method. Although it works fine with rectangles, the hexagon does not get translated as expected. To address this problem, I defined the canvas and context elements using ...

javascripthtmltypescriptcanvas