What is the best way to align the icon in the middle of these social buttons?

I'm struggling to center the font awesome icons both vertically and horizontally within their rounded background. Every time, they end up on the left, top, or bottom.
Is there a way to adjust the positioning of these icons and properly center them?

Below is the code (Extra lines added in CSS since it's in the footer):

     
    .page-footer {
      background-color:#222222;
      padding: 0 40px;
      text-align: center;
    }
    .page-footer a {
      font-size:14px;
      color:#ffffff;
    }
    
    ul.social-buttons {
      text-align: center;
      justify-content: center;
      margin-top:40px;
    }
    
    ul.social-buttons li a {
      font-size: 35px;
      line-height: 50px;
      display: block;
      width: 70px;
      height: 70px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      color: #222222;
      border-radius: 100%;
      outline: none;
      background-color: #ffffff;
      border:5px solid #fed136;
    }
    
    ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
      background-color: #fed136;
    }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="col-md-4">

                  <ul class="list-inline social-buttons">
                      <li class="list-inline-item">
                        <a href="#">
                          <i class=" fab fa-linkedin-in"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#">
                          <i class="fab fa-google-plus-g"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#">
                          <i class="fab fa-facebook-f"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                          <a href="#">
                            <i class="fab fa-twitter"></i>
                          </a>
                        </li>
                    </ul>
      </div>

twitter-bootstrapcssbootstrap-4font-awesome

Answer №1

To vertically align the i elements, you can apply the CSS property vertical-align:middle. Since they are inline-block elements, they will automatically be vertically aligned within their container without the need for specific line-heights or margins.

Check out the example below:

.page-footer {
  background-color: #222222;
  padding: 0 40px;
  text-align: center;
}

.page-footer a {
  font-size: 14px;
  color: #ffffff;
}

ul.social-buttons {
  text-align: center;
  justify-content: center;
  margin-top: 40px;
}

ul.social-buttons li a {
  font-size: 35px;
  line-height: 50px;
  display: block;
  width: 70px;
  height: 70px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #222222;
  border-radius: 100%;
  outline: none;
  background-color: #ffffff;
  border: 5px solid #fed136;
}

ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover {
  background-color: #fed136;
}

ul.social-buttons li a i {
vertical-align:middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<div class="col-md-4">
  <ul class="list-inline social-buttons">
    <li class="list-inline-item">
      <a href="#">
                      <i class=" fab fa-linkedin-in"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                      <i class="fab fa-google-plus-g"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                      <i class="fab fa-facebook-f"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                        <i class="fab fa-twitter"></i>
                      </a>
    </li>
  </ul>
</div>

Alternatively, another option would be to use the following CSS:

ul.social-buttons li a {
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer №2

To ensure consistency, the line-height should match the height of the elements container. In this case, the <a> element occupies a height of 70px, with 10px taken up by the border (5px on each side), resulting in a container height of 60px. However, the line-height has been set to 50px.

Adjust the line-height value from 50px to 60px.

This approach focuses on modifying the line-height directly instead of utilizing flex styles.

.page-footer {
  background-color:#222222;
  padding: 0 40px;
  text-align: center;
}
.page-footer a {
  font-size:14px;
  color:#ffffff;
}

ul.social-buttons {
  text-align: center;
  justify-content: center;
  margin-top:40px;
}

ul.social-buttons li a {
  font-size: 35px;
  line-height: 60px;
  display: block;
  width: 70px;
  height: 70px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #222222;
  border-radius: 100%;
  outline: none;
  background-color: #ffffff;
  border:5px solid #fed136;
}

ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover {
  background-color: #fed136;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-google-plus-g"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>

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

How to achieve inter-column padding in Bootstrap 4 while eliminating the need for side margins

I'm currently working with Bootstrap 4.1 and I have a grid layout consisting of cells (Box A-E) with some space between them. The issue I'm facing is that when I apply padding to each column, it also adds padding to the left and right sides, caus ...

csstwitter-bootstrapbootstrap-4

Ways to enable file/result downloads on a website using HTML

Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...

javascripthtmlcssuser-interface

What is the best way to conceal just the scrollbar thumb in a Bootstrap modal?

When opening a modal in Bootstrap according to the documentation, it only hides the scrollbar thumb, like shown in the examples below: However, my modal hides the entire scrollbar. How can I modify it to hide only the scrollbar thumb? body { height: ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-modal

Display elements that are positioned absolutely within a container with scrolling overflow

My modal contains a scrollable list with many items that have absolute positioned elements causing overflow within the modal. How can I ensure that the absolute positioned elements are visible in this scenario? .modal { width: 300px; border: 1px ...

htmlcssscrollabsolute

Achieve equal distribution of divs with a specified size

After searching through various questions, none of the answers provided a solution that worked for my specific situation. Within my project, I have a series of divs, each with a fixed width of 210px. The container holding these divs is able to resize bas ...

htmlcss

Can you provide instructions on how to insert a hyperlink onto a background image?

Is it possible to add a hyperlink to this background image without causing it to disappear? Would creating a new class in the stylesheet be the way to go? (I encountered an issue where the image disappeared when trying to call the new class). body{ back ...

htmlcss

Is the CSS :not selector failing to operate as expected?

I have been trying to use the :not selector in my code, but for some reason it's not working. I can't figure out why this is happening, especially since the ul element does have the webmedia-gallery class. Any thoughts on what could be causing th ...

css

There is no element available to input text using send_keys in Selenium

Currently learning about selenium, please pardon any errors. Thank you :) I am trying to scrape a website that allows users to create blogs on 'tistory' using selenium. In order to publish an article, I need to choose between default mode, mark ...

pythonhtmlcssseleniumselect

What is the best way to contain several elements in a flexbox with a border that doesn't span the entire width of the page?

Just dipping my toes in the waters of web development and I've come across a challenge. I'm attempting to create a flexbox container for multiple elements with a border that doesn't stretch across the entire width of the page, but instead en ...

htmlcssflexboxresponsive-design

Create a chessboard with a border using only HTML and CSS

I recently completed a chessboard using only HTML and CSS, but I am facing a challenge as I attempt to add a frame around the board. Since I lack design skills, I am struggling to achieve this simple task. I have tried utilizing the CSS border property wit ...

htmlcss

Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...

javascriptjqueryhtmlcss

Display the progress bar's completion percentage during animation

Creating a progress bar using HTML with the following structure: <div class="progressbar"><div class="text">%0 Completed</div> <div class="progressbar_inner"></div> </div> Implemented jQuery code fo ...

jqueryhtmlcssprogress-barprogress

Is it possible to utilize global variables within CSS properties?

I have a scenario where I need to dynamically change values in an animation. The line of code that needs modification is: clip-path: polygon(var(clip1) 0, 100% 1%, 100% 100%, 50% 100%); let root = document.documentElement; root.style.setProperty('c ...

javascriptcssdomcss-selectors

Having trouble getting my JS/CSS code to work for a single image music play/pause button. Any suggestions on how to fix it?

I'm currently working on a project and trying to incorporate a music button into the navigation bar. The goal is for the song to play when clicked, and then pause when clicked again. However, I've encountered some issues with getting it to functi ...

javascripthtmlcssbootstrap-5

Bootstrap 4: The mystery behind why the popover fails to appear inside a scrollable dropdown

Is there a way to replicate the behavior of Bootstrap 3 dropdowns with scrollbars on hover and popovers in Bootstrap 4? It seems that setting overflow:hidden; for scrolling functionality in dropdown menus also hides the popover. I have tried using containe ...

javascriptjquerycssbootstrap-4bootstrap-popover

Using JQuery and/or Selenium/WebDriver to ascertain the visible color of elements on a webpage

Is there a way to accurately determine the visible color of page elements? When using JQuery, I can retrieve the background-color of an element with the following code: $('#foo').css('background-color'); However, the background-color ...

jqueryhtmlcsscolorsselenium-webdriver

The Div element containing the rollover button/picture is failing to resize properly as the window is decreased in size

Whenever I try to resize my browser window in Firefox or Chrome, the div ends up moving instead of resizing. I've searched on stackoverflow for answers but haven't found any solutions yet. Can someone please help me with this issue? Here is what ...

htmlcssdreamweaver

What is preventing the container slide from reacting solely to the image?

I've been working on an image and a slider, and everything seems to be functioning as intended. However, there is a strange reaction on the left side even before reaching the image. I've tried tweaking it, but I can't seem to figure out the ...

htmlcss

Interested in integrating Spring MVC with React Bootstrap or Material UI?

Can a Spring MVC application be used to serve React Bootstrap or Material UI webpages alongside the Spring application? If yes, which specific aspects should I focus on to make this work seamlessly? ...

springtwitter-bootstrapreactjsspring-mvcmaterial-ui

HTML - one div's child element takes precedence over another div

My HTML page features two consecutive divs. The first div contains a child span that has a relative position, causing it to overlap the second div. I have implemented click events for both divs. However, when I click on the span that overlaps the second d ...

javascriptjqueryhtmlcss