What is the best way to align anchor text in the center with images?

I'm trying to align my images and anchor text in a horizontal row that is centered with the form. The images and anchor text should also be aligned with each other and with the surrounding text.

Take a look at the complete page: https://i.sstatic.net/5sUBO.png

Here's an image illustrating the issue: https://i.sstatic.net/liHV0.png

I need the "Facebook, Google, and Apple ID" text to be centered between the images and I require both the images and anchor text to align properly with the text that says "or sign up using...". I initially used "display: flex" for the anchor text and images but they ended up stacking vertically. Due to this, I had to resort to using "display: inline-flex" to achieve the desired horizontal alignment.

/* styles for the main page */

.main {
  display: table-cell;
  width: 89.3%;
  vertical-align: top;
  background-color: rgba(17, 13, 13, 0.904);
}

form {
  border: 3px solid rgb(26, 25, 25);
  background-color: rgb(26, 25, 25);
  border-radius: 5px;
  height: 85%;
  width: 60%;
  margin-top: 15px;
  margin-left: 70px;
}

h1 {
  text-align: center;
  color: white;
  font-size: 28pt;
  font-family: 'Montserrat', sans-serif;
}

#user {
  margin-left: 40px;
  margin-right: 7.4em;
  font-family: 'Inter', sans-serif;
  color: rgb(172, 164, 164);
  font-size: 10pt;
}

/* more CSS rules here... */

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Chess Facts</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="../styles/signin.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
  /* additional styling links */
</head>

<body>
  /* structure of the webpage with relevant content goes here */
</body>

htmlcss

Answer №1

To center align the content in your socials div, add text-align: center;":

#socials {
  text-align: center;
}

Your socials div will now appear centered like this:

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

Answer №2

.sub-menu-links a {
 display: flex;
 align-items: center;
  }

successfully implemented!

Answer №3

I was discussing the div tag with the IDs "#flex container" and "#flex container a", which contained my anchor tags and image tags.

Here is the code snippet:

#flex-container {
    display: flex;
    justify-content: center;
}

#flex-container a {
    font-family: 'Inter', sans-serif;
    color: rgb(172, 164, 164);
    font-size: 10pt;
    text-decoration: none;
    display: flex;
    align-items: center;
}

Check out the solution image: https://i.sstatic.net/uSwNE.png

Answer №4

It appears that your issue may be related to incorrect tagging or class selection. This is a common error that occurs frequently.

To resolve this, consider adding display: flex; to the #socials element and using justify-content: center;

Alternatively, you can try applying text-align: center; to #socials.

If you require additional assistance, feel free to reach out for further guidance.

Answer №5

Guaranteed Success! 👇

To ensure proper alignment of the anchor tag style, simply include align-items: center.

To center both the p and div, enclose them in a wrapping div with a designated class, then apply the following code to that div:

div {
   display: flex;
   justify-content: center;
   align-items: center;
}

The complete code snippet is provided below:

HTML:

<div class="container">
    <p id="alternatives">Or Sign Up Using...</p>
    <div id="socials">
        <a href="#"><img src="asset/facebook-brands.svg"></img>Facebook</a>
        <a href="#"><img src="asset/google-brands.svg"></img>Google</a>
        <a href="#"><img src="asset/apple-brands.svg"></img>Apple ID</a>
    </div>
</div>

CSS:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

#socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

#socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    color: black;
}

#socials img {
    width: 50px;
    height: 50px;
}

Additional Information:

  1. I have used custom icons for demonstration purposes.
  2. The "container" class pertains to the wrapper for the p and div elements.

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

Having Trouble with jQuery toggleClass

I'm currently working on a project where I have implemented a button that displays a menu when clicked. I am attempting to change the color of the button when it is active, however, the toggleClass function is not behaving as expected. Below is the co ...

jqueryhtmlcss

What steps can I take to ensure the image remains fixed in its position when the browser width is reduced?

Recently, I encountered a challenge with my media query where I wanted to align a button next to another one when the browser width was reduced to 991px. However, instead of staying in place, the button started sliding underneath the other button as I cont ...

htmlcssdebuggingmedia-queries

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Utilizing the <Box> component from MUI core and the <DataGrid> component from MUIX, along with some other components, I have created a data grid that has the following appearance: https://i.sstatic.net/Gc8sP.png When the number of rows exceed ...

csstypescriptscrollmaterial-uioverflow

Submission of a form through a dropdown menu

This dropdown form is not functioning properly when I try to submit it. Here is the code: <form name="subselect"> <select name="menu"> <option selected="selected" value="javascript:void(0)">Se ...

htmlonclicksubmitonchange

Foundation 6: Alignment issues with Top Bar

Exploring Foundation 6 and trying out the sample code. I'm puzzled as to why the "Site Title" is not in alignment with the rest of the top-bar, it seems to be slightly higher up. <div class="top-bar"> <div class="top-bar-title"> ...

csshtmlzurb-foundationzurb-foundation-6

Make sure the text remains separate while on the same line as the div element

I am currently using CSS to make part of my text bold, but I only want a specific portion of the line to be bold. How can I achieve this effect without making the entire line bold? Check out my code below: HTML <div> <div id="titleLabels"> ...

htmlcsstext

Is there a way for me to utilize VB to remotely click a button on a webpage

I've been searching for a solution to my issue but none of the suggestions from other posts seem to work for me. I am attempting to write VB code that will modify the year dropdown, populate the address field, and then initiate a search when a button ...

htmlvba

Using HTML5 datetime-local to only accept dates in the format Y-m-d

I am currently working on a form that includes a datetime-local input field. <input type="datetime-local" id="datetime" /> After clicking on the today button, the date is automatically set to today's date like this: 2018-11-05 --:-- However ...

jqueryhtmlformsdatetime

Issue with border in a nested table within an HTML table

I am faced with an issue in styling nested tables. My goal is to have borders on both tables, but I specifically need only the bottom border of the inner table without the top, right, and left borders. The default border style can be achieved using the fol ...

htmlcss

PHP data insertion using filters and validation

I have created a database and implemented a validation system to ensure that fields are not left empty. If the fields are filled and pass through the sanitization function, I then proceed to save the data in the database. <?php // Define variables as ...

phphtml

In the world of HTML5, you can find the <main> nestled within the <

Plot: As I was creating a coupons website, I came across the issue of incorporating non-unique content into the <main><article> ..here..</article></main>. Problem: Despite w3schools' statement : The content inside the eleme ...

html

Steps For Adding Margins To A ProgressBar In Bootstrap To Give It A Spaced Look

Currently, I am endeavoring to design a progress bar that includes some spacing from the edges. The desired end result can be seen in the image below: https://i.sstatic.net/IvMFS.png The visual displays a red line within the gray progress bar, which is e ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What is the best way to center-align my list within the designated area?

I need help centering a two column list on my webpage. It's currently justified to the left. How can I adjust it? To see what I'm working with, check out my jsfiddle: http://jsfiddle.net/huskydawgs/c2yqmfzt/5/ <p> A banana is an edible fr ...

htmlcss

Looking for some CSS to style the image below

Looking for CSS assistance to style the sample image provided below. The letter within the circular element is contained in a div while the subscript Z is represented by an image of a circle. https://i.sstatic.net/sKF1H.png .text-center { text-align: ...

htmlcss

Modify the background of the parent component when hovering in ReactJS

Here is my React code snippet that I am working with: Code My goal is to change the background of the App component to the "E-commerce" picture when hovering over it. This should apply to all other pictures as well. Any assistance in solving this issue ...

cssreactjs

using hover/click functionality with a group of DIV elements

I have a group of DIV elements that I want to apply an effect to when hovering over them with the mouse. Additionally, when one of the DIVs is clicked, it should maintain the hover effect until another DIV is clicked. <div class="items" id="item1"> ...

javascriptjqueryhtml

Items in a scrolling flex container are not properly aligned in the center

HTML: <div id="container"> <div class="item">Foo</div> <div class="item">Bar</div> </div> CSS: #container { display: flex; justify-content: center; overflow: auto; } .item { flex-grow: 1; m ...

cssflexbox

Tips for organizing child cards within a parent card using Bootstrap

I'm trying to set up my child card within the parent card to look like the image provided. I'm using Bootstrap 4 and the card_deck class. https://i.sstatic.net/ihWrb.png However, I'm facing difficulties in getting the layout to match the p ...

htmlcsstwitter-bootstrapbootstrap-4

What is the reason for the table height being larger than the combined height of its cells?

I'm fairly new to javascript, so please bear with me if my question seems simple or naive. In one of my exercises, I was tasked with creating a DIV element with specific width and height, and then generating a table inside this DIV using javascript. ...

javascripthtml

Ways to update the hidden field's value within a foreach loop when the change event occurs?

On my page, I have input fields and foreach conditions set up. <form action="process.php" name="employee" method="post"> <input type="text" name="name" class="onchangefield"> < ...

javascriptphphtmljquery