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

Utilize the Appy Wordpress Widget in your designated widget region

This is my first time working with WordPress, and I am attempting to add a custom Widget to an HTML box. Here is the HTML: The blank News box Following some tutorials, I created a new Widget area inside my functions.php file using the following code: &l ...

phphtmlwordpresswidgetarea

The HTML input element does not comply with the specified pattern

My current struggle lies in validating the input field for a "Phone Number". Despite creating a regex pattern that demands 10 numbers, I still encounter the error message: "Please match the requested format". I am puzzled as to why this is happening, even ...

htmlformsvalidationinput

- Convert text style and include bullet points: • Alter

Is there a way to convert the script from a Mail_Object to HTML in order to properly format lines 3 and 4 into bullet points, as well as change the font on line 5? I have no knowledge of HTML. The code below functions but does not apply any formatting or ...

htmlexcelvbaoutlook

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

javascripthtmlcssdjangobootstrap-4

What is the best way to exclude blank fields when displaying a form for printing?

I have a form created using PHP. Although it displays correctly, I would like it to check each field and exclude any div/element/field that is left empty when I choose to print the form. Below is an example of the form code in the printable PHP file. If n ...

phphtml

Unable to assign image src to a dynamically generated div

My current task involves setting the background URL of a dynamically created div in JavaScript, intended for use with the jQuery Orbit slider. Below is my approach: var content1 = null; $("#featured").html("<div id='content' style='&apos ...

javascriptimagehtmlsrcorbit

How can I position four DIV elements to the right of each other inside a parent DIV?

I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv): <div> <div>1</div> <div>2</div> <div>3< ...

css

Having trouble getting a background image with tint to display properly in Bootstrap

I applied a sleek black transparent gradient to my body background picture, but as soon as I integrated bootstrap into the HTML code, the effect ceased to function. body { background: linear-gradient( rgba(0, 0, 0, 0.5), rgba ...

htmlcssbootstrap-4

Shifting gradient hues for illustrations?

One technique I have mastered is creating dynamic gradient colors for text elements using the following CSS: a { &:hover { background: linear-gradient(-45deg, green, yellow, red, blue); background-size: 200% 200%; animation: gradient-movi ...

htmlcssvue.jsfont-awesomevuejs3

The specified CSS background image is not correctly aligned with the dimensions of the selector

I have multiple non-local images that I want to use as background images for classes with a width of 500px and height of 330px. Even though these dimensions are specified in the CSS properties for the class, the background: url('http://www.example.com ...

htmlcssimage

Managing post requests within the express.js framework

I need assistance utilizing the value provided in a form within Node.js. Here is an example: index.html : <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div align="middle" > <!--Ethernet ...

javascripthtmlnode.jsexpress

Disable toolbar focus in TinyMCE

Is there a method to prevent the appearance of the white square known as "Focus to toolbar" in TinyMCE? Clarification: Upon pressing Alt+F10 in TinyMCE, a white square is outlined around a button on the toolbar. This allows navigation among toolbar butto ...

javascripthtmlcsstinymcetinymce-4

Customizable Designs in Oracle Application Express version 4.2

In my work supporting the organization, I am using APEX 4.2 to create a Training Calendar. While I am not a DBA or programming expert, I have been learning through trial and error. The calendar is already set up, but I am looking for a way to customize ho ...

csssqloracle-apex

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Having some JSON data stored in dummyData, I am seeking guidance on how to position chat bubbles on the left and right based on the direction. My framework of choice is Material UI along with the context API. The attached image serves as a visual reference ...

javascriptcssreactjsmaterial-uijsx

Calculate averages of an array and show them when the page loads using Vue

In my coding project, there is an array named products that follows this specific structure: { "_id": "150", "name": "Milk", "description": "Skimmed", "price": "10", "ratings": [ ...

javascripthtmlvue.js

Is it possible to incorporate HTML and CSS into Kivy and Python 3 development?

Currently in the process of creating a multi-touch kivy program using Python 3.52 on Linux. While Kivy is effective, I've encountered challenges with GUI development and experienced laggy animations. I've noticed that my program tends to slow do ...

pythonhtmlcssembeddedkivy

Align two tables horizontally in the center using HTML

Is there a way to center two tables side by side using CSS? I have been able to center a single table, but I am struggling to center two tables together. Can anyone provide a simple solution using CSS? Below are the codes I have used: @import url(ht ...

htmlcsshtml-table

Reading and storing HTML source code in Python line by line

Recently, I embarked on the journey of learning Python 3. As I delved into my Python book, I found myself pondering some questions... One of my challenges is to extract key words from HTML source code. I managed to write code that allows me to open a URL ...

pythonhtmlpython-3.x

Creating a dynamic 2x2 grid with centered responsiveness in Angular Ionic framework

I'm having trouble achieving a 2 x 2 grid that is centered on my screen. The code snippet below shows what I have so far in the HTML file. Just to provide some context, this project is meant for a native mobile application. <ion-header> <i ...

htmlcssangularionic-frameworkstyling

Express will be used to return empty values to an array

I am currently in the process of learning how to use express, so I am relatively new to it. I am facing an issue where I am trying to send data from a form I created to an array, but unfortunately, it is adding empty values to the array. The values are dis ...

htmlnode.jsexpressejs