What is the best way to center text alignment?

I am currently working on creating a hyperlink with an icon using glyphicon, and I am aiming to align both the icon and text in the center. Despite my attempts with padding and margin adjustments, it seems to affect both the icon and text. My goal is to solely adjust the position of the text while keeping the icon in place. Below is a snippet of my code:

.quick-links{
    margin-left: 15px;  
    line-height: 2;
    font-family: 'arial rounded MT';
    border:1px solid;
}
.text-position{  
  display:inline-block; 
  font-size:18px;    
  padding:0px 0px 0px 5px; 
  margin: 0px 0px -15px 0px;
}


.quick-link-text a{
  font-weight:500;
}

.quick-link-text a:hover{
  text-decoration: none;
  font-weight:1000;
}

.glyphicon-plus-sign{
  font-size:24px;
}

Below is the HTML content:

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">

<div class="quick-links col-lg-4 col-md-4">
        <h3>
            Quick Links
        </h3>
        <div class="quick-link-text">
          <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position">  First Link</div></a>          
        </div>
  <div class="quick-link-text">
    <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> Second Link</div></a>
    </div>
    </div>
htmlcsstwitter-bootstrap

Answer №1

.helpful-links{
    margin-left: 20px;  
    line-height: 2;
    font-family: 'roboto';
    border:1px solid;
}
.link-position{  
  display:inline-block; 
  font-size:16px;    
  padding:0px 0px 0px 5px; 
  margin: 0px 0px -10px 0px;
}

.helpful-link-text a{
  font-weight:600;
  display: flex;
align-items: flex-start;
}

.helpful-link-text a:hover{
  text-decoration: none;
  font-weight:800;
}

.glyphicon-plus-sign{
  font-size:20px;
}
<link rel ="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="helpful-links col-lg-5 col-md-5">
        <h3>
            Helpful Links
        </h3>
        <div class="helpful-link-text">
          <a href="#" class="glyphicon glyphicon-plus-sign"><div class="link-position">  Third Link</div></a>          
        </div>
  <div class="helpful-link-text">
    <a href="#" class="glyphicon glyphicon-plus-sign"><div class="link-position"> Fourth Link</div></a>
    </div>
    </div>

Answer №2

Avoiding flexbox? Opt for the position attribute instead.

.navigation-link-text a {
  font-weight: 500;
  position: relative;
  padding: 0 25px;
}
.glyphicon-plus-sign:before {
  position: absolute;
  bottom: -5px;
  left: 0px;
}

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

Endless cycle of changing border colors

I'm trying to achieve a specific effect where the border of a div changes colors in an infinite loop. However, I want this effect to be applied only to the border of the div and not the entire body background. Here is an example: http://jsfiddle.net/A ...

javascriptcsscss-animations

HTML Button to Populate Text in Textarea Box

I'm trying to figure out how to display HTML inside a textarea box for a link. I've managed to get it working perfectly, but I want it to show <a href="https://youtube.com">Link</a> instead of "Code for Link in HTML." Is th ...

javascripthtml

One method for activating a second Select>Option with the use of a first Select>Option in an HTML form

In my HTML/PHP form, I aim to create two dropdown lists. The first one should be constantly visible, and depending on the selection made in it, a second dropdown list should be revealed. Although I attempted the code below to test the functionality, the s ...

phphtml

The vertical navigation pills in Bootstrap 4 are not functioning properly as anticipated

I've been referring to the bootstrap 4 documentation for my project. After copying and pasting the code snippet for vertical pills, I noticed it wasn't functioning correctly. Instead of displaying text next to the buttons, it was appearing belo ...

javascripthtmlcssbootstrap-4

Tips for seamlessly integrating an Instagram post into your website without adjusting the container size

I'm trying to include an Instagram photo or video post within my WordPress article. It displays correctly on the desktop version, but on mobile devices, it causes the container to expand and everything appears smaller. Check out this screenshot of th ...

htmlcsswordpressinstagram

What could be causing my button to be elongated in a vertical direction when a logo image is present

I am currently utilizing tailwindcss for my project. Within a flexbox container, I have placed a login button which appears to be stretched out. <nav font-am class="m-6 text-xl"> <div class="flex flex-row justify-between conta ...

htmlcssflexboxtailwind-cssweb-frontend

Locating error messages in Selenium WebDriver: mastering xpath and css selectors

Test scenario: 1. Visit the [example test URL] : 2. Scroll to the bottom of the page and observe the Facebook comment module. 3. Without signing into Facebook, click 'Comment using' button and select 'Facebook' from the dropdown menu. ...

cssseleniumxpathautomationwebdriver

Struggling with creating a unique business card design with CSS

Currently, I am working on designing a business card that features the name and title at the center, with the email and phone number positioned on the extreme left and right sides of the card. Below is the code snippet I have been using: .business-card ...

htmlcssresponsive-designflexbox

Save webpage as a string in C# using ASP.NET

I am attempting to retrieve the HTML content of an aspx page from another page using the following code snippet: WebClient webClient = new WebClient(); String CompleteReport = webClient.DownloadString(new System.Uri(reportURL)); However, the returned HTM ...

c#htmlasp.net

Issues with the visibility and hidden classes in Bootstrap 4's responsive utilities for extra small, small,

Encountering an issue with the new responsive utility classes for hiding and showing elements in Bootstrap 4. I know that the .hidden- classes have been replaced in version 3 with .hidden-*-up and .hidden-*-down. I've tried using the new .hidden-*-up ...

twitter-bootstraptwitter-bootstrap-3hidehiddentwitter-bootstrap-4

I was able to resolve the fixed position issue of a button on Safari for iPhone 3G

Here is the setup I have on jsfiddle: http://jsfiddle.net/zZDqH/ Currently, there is a button fixed at bottom:0px. You can scroll up and down the page, and the button will stay at the bottom of the page. However, when testing in Safari on an iPhone 3G ( ...

iphonehtmlcsssafari

Issue with auto-sliding feature on Bootstrap carousel

Wishing you a wonderful day! I'm encountering an issue where only the first slide appears for a few seconds before disappearing completely. Strangely, if I use the side arrows or buttons before the slide disappears, it functions normally. HTML <he ...

javascripthtmlcssbootstrap-4carousel

The image next to the words

Hey there, I'm looking to add a photo next to some text on my page using flexbox. I was able to achieve something similar but I'm open to other suggestions. Check out what I have so far here and here's the desired look: It should look like ...

htmlcss

Display the PrimeFaces dialog in the middle of the screen

I've encountered an issue with positioning dialogs on different pages. I tried using a CSS code to center them on the screen, but it didn't work as expected. .ui-dialog{ position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

cssuser-interfacedialogdatatableprimefaces

Looking to align a div in the middle of a parallax background image?

I'm trying to center a div with a parallax background image both horizontally and vertically on the page. I attempted using classes from Bootstrap 4 such as d-block, mx-auto, and text-center. While it centered the div horizontally, it did not center i ...

htmltwitter-bootstrapcss

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Does anyone know how to make a checkbox readonly so that its value can be submitted, while also disabling it? Using the disable attribute prevents the value from being submitted, and setting it as readonly doesn't seem to work for checkboxes. Your as ...

javascriptjqueryhtmlcss

Altering the color of text in hyperlinks within a list

Recently, I've started exploring CSS styling and I'm curious if there is a more effective way to change the color of link text when they are within a list. Currently, all my links have the same color and I'd like to enhance this aspect. < ...

htmlcsscolorshyperlinkstyling

Examining pseudo-elements on Internet Explorer

Recently, I encountered an issue with a pseudo-element: input[type=radio].selected::before Surprisingly, in Internet Explorer, the pseudo-element wasn't visible at all. This prompted me to investigate further. Upon inspecting the selector (imagi ...

css

Using jQuery, adjust the width of child elements within a container by applying dynamic CSS styling

I am attempting to dynamically set the width of several child elements using jQuery. Here is what I am trying to achieve: Obtain the count of the desired containers (since there will be multiple instances of the .steps-container class in the DOM) Iterate ...

javascriptjquerycss

An issue arises when attempting to capture a screenshot with three.js, displaying the error message: "'modelViewMatrix' is a data that cannot be modified or configured."

Currently, I am utilizing three.js within my Vue application with the goal of capturing a screenshot of my scene as a blob. Initially, I tested this functionality by implementing: window.addEventListener('keydown', this.test.bind(this)); Within ...

htmlvue.jsthree.jsrender