Tips for centering content in the middle of a line

How can I center align 3 buttons on a line using CSS and HTML?

This is what I have tried so far:

1/ CSS : 

.center-buttons {
    display: flex;
    justify-content: center;
}

.button {
    margin: 0 10px;
}

2/ HTML:

<div class="row">
    <div class="col-12 ">
        <div class="center-buttons">
            <button class="button" style="background-color: #1da1f2">Twitter</button>
            <button class="button" style="background-color: #3B5998">Facebook</button>
            <button class="button" style="background-color: #0084ff">Messenger</button>
        </div>
    </div>
</div>

The current result shows the 3 buttons in the middle but not perfectly aligned.

What I am aiming for:

I would like all 3 buttons to be vertically centered with the line.

Any suggestions or feedback would be greatly appreciated.

**** EDIT *****

I will update the results based on suggestions here

1/ From @Gerard

https://i.stack.imgur.com/3q8KB.png

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

I believe utilizing a flexbox is the best choice as it inherently provides responsiveness.

.strike {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  border: thin solid red; /* for visibility only */
}

.strike:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: gray;
  z-index: -1;
}

.strike>button {
  min-width: 40px;
  border-radius: 50%;
}

.btn.tw {
  background-color: #1da1f2
}

.btn.fb {
  background-color: #3B5998
}

.btn.ms {
  background-color: #0084ff
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 ">
    <div class="strike">
      <button class="btn tw">
        <i class="fab fa-twitter"></i>
      </button>
      <button class="btn fb">
        <i class="fab fa-facebook-f"></i>
      </button>
      <button class="btn ms">
        <i class="fab fa-facebook-messenger"></i>
      </button>
    </div>
  </div>
</div>

Answer №2

Give this a shot:

.highlight > span{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Using the provided code snippet will make it easier for me to assist you, but give this code a try...

Answer №3

Give this a shot vertical-align: middle;

.strike > span button {
    vertical-align: middle;
}

Answer №4

It seems like you might need some clarification on your question. Is this the solution you are looking for?

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.strike>span {
  position: relative;
  display: inline-block;
}

.strike>span:before,
.strike>span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: #000;
}

.strike>span:before {
  right: 100%;
  margin-right: 15px;
}

.strike>span:after {
  left: 100%;
  margin-left: 15px;
}

button {
  width: 40px;
  border-radius: 22px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 ">
    <br/>
    <div class="strike">
      <span>
                <button class="btn btn-info btn-just-icon"
                    style="background-color: #1da1f2">
                    <i class="fa fa-twitter"></i>
                </button>
               <button class="btn btn-just-icon"
                   style="background-color: #0084ff">
                   <i class="fab fa-facebook-messenger" style="color: white;"></i>
               </button>
               <button class="btn btn-just-icon"
                   style="background-color: #3B5998">
                   <i class="fa fa-facebook-f" style="color: white;"></i>
               </button>
           </span>
    </div>
  </div>
</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

using JQuery, add a class on click event or on page load

Solved It! After encountering a problem created by some sloppy moves on my part, I managed to solve it. However, another issue arose: adding the class current to li with data-tab="tab-1 upon page load. $('ul.tabs li').click(function(){ ...

javascriptjquerycss

Using div tags as interactive buttons, as well as incorporating dynamic functionality such as delete and report spam options

In this practice test scenario, the objective is to log in to Gmail, click on all checkboxes in a dynamic web table, and delete the mails. Below is the code that I have created for this task. The issue arises when checking if the delete button is visible. ...

htmlseleniumtestingautomationwebdriver

Is there a way to dynamically update text using javascript on a daily basis?

I am currently developing a script to showcase different content and images every day. While I have successfully implemented the image loop to display a new picture daily, I need assistance in achieving the same functionality for the title. My aim is to c ...

javascriptjqueryhtmldynamic

Modifying the data attribute within the div does not result in a different image for the 360-degree spin view

My current project involves utilizing js-cloudimage-360-view.min.js to create a 360-degree view of images. I have successfully retrieved the images, but I am encountering difficulty in updating the images by clicking a button. index.html <!DOCTYPE html ...

javascripthtml

Animating Elements with CSS and HTML

Struggling with my website project, specifically creating a login page. The issue arises when resizing the browser, causing elements to look misaligned and chaotic. Before: view image here After: view image here /* Bordered form */ form { margin-l ...

htmlcss

What are some ways to enhance the appearance of the initial two items in a list through CSS?

Is it possible to enhance the appearance of the first 2 elements in a list using CSS for IE8 compatibility? Here is an example of the format: <ul id="list1" style="margin-left:-20%;font-weight:bold" > <li class="xyz"> Element1 </li> ...

css

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

cssreactjstypescript

Displaying dropdown options based on the previous selection made by the user

Can I link the data in my second dropdown to the selection made in the first dropdown? I tried a similar solution from stackoverflow without success. You can find the reference here. The code works when directly copied and pasted but not within my system. ...

javascriptphphtmljquery

What is the best way to use jQuery to access dynamic HTML elements?

I have created a dynamic table that allows users to add and delete rows. However, I am facing an issue with accessing the information inputted by the users for calculations because it seems to be inaccessible once dynamically added to the page. Below are ...

jqueryhtmldynamic

Despite reaching a video readystate of 4 in HTML5, the video still hangs and does not play smoothly

Using html5, I am currently working with video and audio. I have encountered an issue where sometimes the video hangs even after its readyState === 4. The cause of this problem is unclear to me. I aim for a solution where if the video's readyState = ...

javascripthtmljqueryangularhtml5-video

The EJS is causing a problem with linking the style sheet

Currently, I am in the process of familiarizing myself with ejs, express, and node js. Facing an issue while trying to link my style sheet to my header, below is the code snippet and here is a https://i.stack.imgur.com/0BEIn.png. Utilizing include for bo ...

cssnode.jsejs

Enhancing the internal styling of ngx-charts

While working on the ngx-charts Advanced Pie Chart example, I noticed that the numbers in my legend were getting cut off. Upon inspecting the CSS, I discovered that a margin-top of -6px was causing this issue: https://i.stack.imgur.com/oSho1.png After so ...

htmlcssangularngx-charts

ways to run php script based on screen resolution or size

I have 2 php files that I need to execute based on screen size. include_once('large.php'); include_once('small.php'); The condition is to run large.php when the screen size is greater than 992px, and small.php when the screen size is ...

javascriptphpjqueryhtmlajax

What is the most strategic way to conceal this overlay element?

Currently, the website I'm developing features a series of navigation elements at the top such as "Products" and "Company." Upon hovering over the Products link, an overlay displays a list of products with clickable links. Positioned at the top of the ...

javascriptjqueryhtml

Having trouble with your jQuery animation on a div?

Check out this jsFiddle example: http://jsfiddle.net/uM68j/ After clicking on one of the links in the demo, the bar is supposed to smoothly slide to the top. However, instead of animating, it immediately jumps to the top. How can I modify the code to ac ...

javascriptjquerycssjquery-animate

The deletion by index feature seems to be malfunctioning in Angular

Is there a way to delete an item by its ID instead of just deleting the last element using this code? I want to create input fields with a delete button next to each one simultaneously. TS: public inputs: boolean[] = []; public addNew(): void { this ...

htmlangulartypescript

Expanding across the entire horizontal space, excluding any space allocated for

I've been on a quest to find a solution for my unique problem, but all my efforts have been in vain so far. Currently, I'm working on developing a mobile website and facing a challenge with the input boxes. Despite wanting them to take up the en ...

htmlcss

triggering php object on mouse hover

I'm currently working on creating a mouseover effect for my PHP elements within a store. My goal is to have a transparent div appear over the dynamically generated PHP sections. I have set it to display block mode to test its functionality and positio ...

phpcssonmouseover

How to customize the appearance of the Facebook login button alongside other login options

I'm having trouble positioning the Facebook login button in my header. It keeps appearing far to the left and below other links :) I'm currently testing it on this page: My goal is to have the button display just to the left of the login link a ...

htmlcsslayoutstyling

Having trouble with the scrollbar appearance after updating Chrome?

I've encountered an issue with my code after the latest Chrome update. Is there a way to implement cross-browser styling for scrollbars? // Looking for Scrollbar Styling Solution const scrollbarStyle = { scrollbarColor: `${themeLayers.scrollBar[0 ...

javascriptcssmaterial-ui