Positioning two social media share plugins (Facebook and Twitter) side by side on a single line (vertically aligning them

Having implemented Twitter and Facebook share plugins on my site, showcased in this example, I'm facing the challenge of aligning the buttons vertically. Despite attempting to adjust margin-top and padding-top attributes, the alignment issue persists. How can I ensure that the tweet and Facebook share buttons appear nicely on the same line?

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.directory.shopious.com" data-text="some share" data-lang="id" data-size="large" data-count="none">Tweet</a>


    <div class="fb-share-button" data-href="http://www.mysite.com" data-width="500" data-type="button_count"></div>
htmlcss

Answer №1

Utilize the vertical-align CSS property

.fb-share-button {
   vertical-align: top;    
}

Answer №2

Have you experimented with using vertical-align? check out the demo

.twitter-share-button {
    margin-right: 5%;
    vertical-align: middle;
    display: table-cell;
}

It seems to work even without adding display: table-cell;.

If you want your content to be in line with your comment, try using vertical-align: top; instead of middle.

Answer №3

If you want to achieve a more precise alignment, consider using pixels (as suggested by @Praveen Jeganathan):

.fb_iframe_widget {
   vertical-align: 10px;
}

Check out this example on jsFiddle

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

Next JS and the power of media queries

I've been searching for a while now, but I just can't seem to find a solution to my problem. I'm attempting to utilize different files for my media query breakpoints in Next JS, but they don't appear to be working. I created the files ...

cssnext.jsresponsive

programming for the final radio button text entry

I am struggling with a form that has 5 radio buttons, including an "other" option where users can manually enter text. The issue I'm facing is that the form only returns the manual entry text and not any of the preset radio values. I need it to work f ...

javascripthtmltextradio-buttonvar

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?

In my React application built with next.js, I am fetching a stylesheet via a GET request and appending it to the webpage. However, whenever this stylesheet is loaded in, the elements impacted by it re-render unnecessarily, even if there are no actual chang ...

javascriptcssreactjsstylesheetnext.js

- "Queries about Javascript answered with a drop-down twist

Having some trouble with setting up a straightforward FAQ dropdown feature. Could someone lend a hand and see what might be going wrong? Appreciate your help! CSS #faqs h3 { cursor:pointer; } #faqs h3.active { color:#d74646; } #faqs div { height:0; o ...

javascripthtmlcssdrop-down-menu

What is the best way to apply fill to SVG using Tailwind CSS?

I tried using the code provided, but unfortunately, I was unable to Override the fill. The issue seems to have been resolved, but can someone help me achieve this using tailwind CSS? <div className=""> <svg className="text- ...

cssnext.jstailwind-csstailwind-in-js

Center the p tag vertically

To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text. It's important to k ...

htmlcssparagraph

Maintain font kerning for span elements that are not displayed inline

I am looking to add some transform effects to individual letters in a word. To achieve this, I have enclosed each letter within a span element. However, when setting the display of these spans to inline-block, the font kerning gets disrupted. I have exper ...

htmlcss

Encountering issues with the functionality of my Bootstrap navbar

After diving into the world of bootstrap, I encountered some challenges with the navigation bar in mobile view. Despite adding a navbar and a toggle button, it doesn't seem to be functioning correctly. Following tutorials and examples meticulously, bu ...

htmlcssbootstrap-4

Creating an interactive webpage with Javascript and HTML

I'm facing a challenge with my component setup, which is structured as follows: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ ...

javascripthtmlangular

Sharing the input value with a service in Angular 4

I am a beginner when it comes to Angular 4. I currently have a variable named "md_id" which is connected to the view in the following way. HTML: <tr *ngFor="let item of driverData"> <td class="align-ri ...

javascripthtmlangulartypescript

Inheritance of currentColor in SVG URLs

Seeking the same solution as mentioned in How can an SVG image inherit colors from the HTML document?, specifically when applied to an svg image used as content on a :before pseudo-element. (The intended outcome is for both checkmarks to adopt the red col ...

csssvg

Can you explain the purpose of using "link href="#""?

While browsing through the source code of a website, I came across this interesting snippet. <link href="#" id="colour-scheme" rel="stylesheet"> I'm curious, what exactly does this code snippet do? ...

htmlcss

Creating a responsive grid division

.subcategory-main-wrapper { display: grid; grid-template-columns: repeat(4, max-content); position: absolute; width: 100%; column-gap: 4%; justify-content: center; height: 360px; @media @tabletScreens { height: 280px; } @media @ ...

htmlcssresponsive-designcss-grid

Dragging objects on a map is done using jQuery and it causes them to bounce

Currently, I am working on implementing the JQuery Draggable feature. My idea is to create a map where I can attach image Divs to it dynamically using Jquery. So far, I have been successful in adding the Divs and making them draggable around the map effici ...

javascriptjqueryhtmldraggable

Styling Input elements with a unified border in Bootstrap

[Issue Resolved] I have been working on setting a single border between multiple inputs inside a form-group in Bootstrap. Currently, the border is only visible when the input is not focused and it is the last one. However, my expectation is for the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Add formatting to a particular element without affecting elements within another element

Consider the following scenario: <input type='text' /> <br /> <iframe> <input type='text'> </iframe> With the style defined as: input[type='text'] { border: 1px solid black; } If you w ...

htmlcss

Switch the background color when a radio button is chosen

For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...

jqueryhtmlcss

When using jQuery's `.click()` method on an element to collapse it with the 'show' parameter set to false, the disabling action will only take effect after the document

When you first run the program and click anywhere on the body, it activates the collapse element. I want it to only collapse the accordion on click, not show it immediately. Currently, it will deactivate only after it is hidden once. HTML <!DOCTYPE ht ...

javascriptjqueryhtmlcsstwitter-bootstrap

Combine a variable and a string to create a new variable

@color-purple: "#ffffff" @colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey; .ColorsMixin(@i:0) when(@i =< length(@colors)){ //loop over icons array @color: extract(@colors, @i); //extract the ic ...

cssless

Comparing transition effects: scale, transform, and all

My goal is to apply transition effects to specific transform functions in CSS, such as scale(), while excluding others like translate(). Initially, I attempted the following code snippet: input:focus + label, input:not(:placeholder-shown) + label { tran ...

csscss-transitionscss-transforms