Achieving vertical alignment of footer contents using CSS

https://i.sstatic.net/0qVgh.png

This image illustrates my issue. I am attempting to align both the copyright text and my Font Awesome icons vertically.

Below is my HTML code:

<footer>
<p>Copyright &copy; 2016 Sample SIte</p>
<div id="social">
<a class="social_buttons" href="www.linkedin.com"><i class="fa fa-linkedin"></i></a>
<a class="social_buttons" href="www.linkedin.com"><i class="fa fa-twitter"></i></a>
</div>
</footer>

And here is the CSS:

footer
{
max-width:960px;
background-color:#fbfbfb;    
border-radius:10px;  
margin:15px auto 10px auto;
padding: 18px 20px 18px 20px;  
}

#social
{
float:right;
}

.social_buttons
{
color:#575757; 
}

Thank you in advance for your help!

htmlcss

Answer №1

To achieve a responsive layout, consider utilizing Flexbox.

header{
  background-color: #f9f9f9;    
  padding: 15px;  
  display: flex;
  justify-content: center;
}

#menu {
  margin-left: auto;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.0.13/css/all.min.css" rel="stylesheet"/>
<header>
  <h1>Welcome to Our Website</h1>
  <nav id="menu">
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-instagram"></i>
  </nav>
</header>

Answer №2

One possible solution is to include vertical-align: middle; within the social_buttons class.

.social_buttons {
  color: #575757;
  vertical-align: middle;
}

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

What is the best way to use SQL and Flask to automatically fill out a form based on a selection made from a

Looking for assistance with populating an HTML form by selecting a company from a dropdown menu. The desired result is similar to the example found here, using SQL and Flask. I'm unsure of how to retrieve the selected value from the <option> ta ...

pythonhtmlflaskjinja2

My images seem to lose control and go completely wild when I try to turn them into hyperlinks

Seeking advice on why my social icons are behaving strangely. This is a new issue for me and I suspect that some other CSS is causing the problem, but I can't seem to locate it. I want to ensure that the formatting of these images remains consistent ...

htmlcssanchor

Modify the attribute of numerous elements when hovering by implementing CSS transformations

I have a pair of adjacent div elements and I want to modify the background-color attribute of both when the user hovers over one of them. Initially, both divs should have a background-color set to #d8d8d8, and this color should change to #cacaca on both d ...

javascriptjqueryhtmlcss

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

htmlcssangularangularjsprimeng

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

javascriptjqueryhtmltiles

Encountering a parsing error when utilizing the fill CSS property in React

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <g id="flat"> <path d="M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,0-3.642-3.962,4.728,4.728,0,0,0-5.695,3. ...

javascriptcssreactjssvg

What is the reason for nth-of-type selectors not functioning on the third element?

I have a question regarding CSS nth-of-type. In the following code snippet, nth-of-type(2) and nth-of-type(3) are functioning properly, however, nth-of-type(4) and nth-of-type(5) are not working as expected. Could there be an issue with my code? <div i ...

htmlcsscss-selectors

Troubleshooting: Issues with React Material-UI breakpoints not functioning

Trying to create a responsive navbar using Material-UI. The goal is to hide the IconButton between 960px and 1920px, and display it from 0px to 960px. However, it seems to work only below 960px. Here's a snippet of the code for IconButton and ul: ...

cssreactjsmaterial-ui

Is there a CSS alternative to using <br clear=all> on divs that do not have set heights?

Back in the day, I used to rely on <br clear=all> at the end of a div, without specifying a height value in CSS, just to control its height. These divs would expand and contract based on the content within. Is there a more elegant approach to make ...

htmlcss

Using the PhoneGap Back Button to gracefully exit the Application

My current project involves developing Mobile Apps using PhoneGap (Cordova 2.2), JQuery, and Javascript. The landing page is the Login Page. However, after successfully logging in and reaching the Dashboard Page, pressing the BACK BUTTON redirects me back ...

javascripthtmlcsscordova

Personalized styling in material-ui v4.9.0

I recently updated the Material UI version in my project from 0.20 to v4.9. I have successfully changed all the imports to @material-ui/core and my app is compiling without any issues. However, I am facing a problem with the styling. Previously, I did not ...

javascriptcssreactjsmaterial-uiclassname

Achieve focus in EditorFor MVC using JavaScript

You have a button that triggers a pop-up window <a data-dialog="AddProduct" href="@Url.Action("AddProduct", "Outputs")" id="addproduct" class="pop-up-window btn btn-success">Add Product <span class="glyphicon glyphicon-plus-sign" aria-hidden= ...

javascriptc#htmlasp.net-mvcbootstrap-modal

Unusual occurrences observed with the table

While working with tables, I've noticed an unusual effect. Take a look at the two fiddles below. http://jsfiddle.net/v5co5uy7/ (why are the cells in the left column pushed down?) http://jsfiddle.net/v5co5uy7/1/ (the cells in the left column are posi ...

htmlhtml-table

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

javascriptcssslideraspect-ratioslick.js

The JavaScript code is not running as expected!

i have this index.html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...

javascripthtmlcssxmlsvg

Retrieve the CSS attributes within a directive specifically designed for child elements

Currently, I am iterating through the child elements of the element to which the directive is attached, and adding mouseup and mousedown callbacks: var dragDroppables = element[0].children; for (var elementIdx = 0; elementIdx < dragDroppables. ...

javascriptcssangularjsdom

Vanishing text within a jQuery-animated container

I have successfully implemented a sidebar menu that expands when hovered over, revealing text that fades in at the same time. However, I am encountering an issue where if the mouse is rapidly moved in and out of the sidebar before the animation completes, ...

javascriptjqueryhtmljquery-uijquery-animate

Unable to navigate between tabs in Bootstrap 5 navigation tabs

I am currently working on developing a login page that includes two tabs - one for logging in and another for registering. The login tab displays fields for username and password, while the register tab includes fields for name, last name, and email. I h ...

htmltwitter-bootstraptabsbootstrap-5login-page

Having trouble importing from the public folder in CSS with Create React App?

While working on a project initialized with Create React App, in the public folder there is an assets directory containing a file named logo512.jpg. When I use this file in a component like so: <div> <img src='/assets/logo512.jpg'/& ...

javascriptcssreactjscreate-react-app

Challenges with conflicting CSS styling issues

I am facing a CSS issue on my website. I am trying to add captions for images on my site. I have experimented with the jquery-capty plugin () and some custom CSS styles for framed images (). While both solutions work in my regular layout, they do not funct ...

jqueryhtmlcss