What is the best way to horizontally align tiles in Bulma?

For my portfolio website, I have chosen Bulma as the framework. Within the "how to reach me" section, I want to display my social media profiles for contact information. Ideally, I would like these profile tiles to be centered horizontally on the page. However, I am struggling to achieve this using Bulma.

Below is the code for the profile tiles:

.tile {
  text-align: center;
  margin:auto;
}
<div className="container">
    <div className="tile is-ancestor">
        <div className="tile is-parent is-vertical"  >
          <div className="tile is-child is-4 box">
            <p className="title">Linkedin</p>
            <a href="linkedin.com/in/frederic--lang" >Frédéric Lang</a>
          </div>
          <div className="tile is-child is-4 box">
            <p className="title">Twitter</p>
            <a href="https://twitter.com/Fredestrik?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @Fredestrik</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
          </div>
          <div className="tile is-child is-4 box">
            <p className="title">Github</p>
            <a href="https://github.com/Fredestrik">Frédéric Lang</a>
          </div>
        </div>
    </div>
</div>

I would appreciate any guidance on how to center these tiles. I have tried using CSS {text-align: center} and {margin: auto}, but it seems ineffective. It could possibly be a preset in Bulma restricting the centering. Thank you for your assistance. Best regards, Frédéric

Answer №1

.tile has flex display and .tile.is-vertical has flex-direction: column. To center social media blocks, simply include the align-items: center rule:

.tile {
  display: flex;
  align-items: center;
}

If this rule conflicts with another rule (align-items: stretch), use the following format:

.tile {
  display: flex;
  align-items: center!important;
}

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

The process of binding two variables in the same select element

Here is the code snippet that I am working with: <div class="form-group "> <label for="field_type"><b>Type</b></label> <div class="input-icon right"> <select required class="form-control" ...

Implementing alignment adjustment for search bar with bootstrap 5.0

Is there a way I can adjust the positioning of the search bar and button to align left after the navbar-brand element in a continuous manner? I have tried using the bootstrap classes justify-content-start and text-left, but they did not yield the desired r ...

Reducing the amount of products in a MySQL online shopping cart

I have been working on a PHP shopping cart project, and I have successfully implemented functionalities to add, remove, and update items in the shopping cart. However, I am facing a challenge with adjusting the quantity of items in the database when a user ...

CSS animation - gradual disappearance on mouse exit

Hey everyone, I'm in need of some assistance with my animation. I've created a button that moves right and left in a loop, but I'm encountering an issue when the mouse moves away from the button. The transition is not smooth and it jumps bac ...

Looking for ways to increase the speed of rendering in the basic window system using HTML5 and CSS3?

Check out these code samples: http://jsfiddle.net/5r3Eh/10/show/ and http://jsfiddle.net/5r3Eh/18/. I've noticed they are running slow on Chrome 12, slightly improved on 13. Is there a way to achieve drag-and-drop functionality for windows without us ...

How can I access the .ts variable value within an *ngIf statement in HTML?

My goal is to showcase images every 2 seconds, but currently I am only able to display all of them at once. Below is the HTML line I am using: <img id="bh" routerLink="/" *ngIf="bh?.id == count" [src]="bh?.src" height="42" width="42"/> Here is t ...

Excessive content spillage occurs on React Slick slides during rendering

It appears that when I initially load my page (using the address bar) with React Slick, the carousel has some unusual behavior: https://i.sstatic.net/Ktj2M.png There is a brown bar on the right side of the screen. However, if I resize my browser window, ...

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

A tutorial on how to showcase choices in a collection_select using the Rails controller

When a user selects a specific designation, the corresponding benefits should be loaded in a dropdown menu. I have implemented this functionality using an ajax call. HTML: <label>Designations</label> <%= f.association :designation, input_h ...

hidden behind the frame is a drop-down menu

I am currently working on a website that uses frames. The topFrame.php contains a menu with drop-down submenus, while the main frame displays the website content. However, I am encountering an issue where the submenu in the topFrame is getting hidden beh ...

Having trouble with submitting a form using @submit in Vue 3

I am facing an issue with the vuejs @submit.prevent feature in my login form. When I click the login button on my website, it does not work as expected. Even after adding a catch error in the function, the console still shows nothing. Can someone please as ...

Element in SwipeableDrawer of Material UI is repositioned on mobile devices while scrolling

Utilizing Material UI's SwipeableDrawer component, I have successfully created a bottom drawer with a fixed action button container. The container is positioned using position: fixed; bottom: 0;. While this setup works effectively on desktop browsers, ...

A guide on interacting with a link containing an SVG element using Selenium and Java

I'm having trouble clicking a specific button on a website using Selenium with Java. I can click and type in other fields, but this one button is causing issues. Here is the HTML code for the button that needs to be clicked: <div class="sc-dI ...

What steps can be taken to ensure that only a single decimal separator is included?

I've created a calculator in HTML with two display screens, operators, and number buttons. The challenge I'm facing is implementing a decimal separator. Initially, I attempted to use a boolean variable as a switch, but the number() function remov ...

The sidebar remains fixed in height and does not expand vertically

Need Help: My sidebar won't expand in height when I update content. Is there a way to make it adjust using just HTML and CSS? html code: <div id="main"> <section> More text goes here... </section> <div id="sideb ...

Update the row striping pattern once an element has been removed

I've been working on creating a todo-list and implemented row striping. Everything was going smoothly until I realized that when I delete a task, the row striping does not update as intended. Instead of changing to white, white, beige after a deletion ...

Dynamic styles object for React components with inline styles

I have a styles object let styles = { step_div:{ height:'150px', } } I'm trying to display multiple div elements with different colors using React class Layout extends React.Component{ constructor(props) { super(props); ...

When I click the mouse, my drawing function starts lines from the top left corner instead of the latest point

http://codepen.io/FreelanceDev/pen/kLpJSf?editors=1010 You can find my CodePen project through the provided link. While the HTML and CSS elements are working correctly, I am facing issues with the JavaScript functionality. The desired outcome should be d ...

Assigning an "active" class and URL attribute to a link based on the metadata of the current page

I have three pages, each featuring a navigation bar with three links: <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/home">Home</a> </li> <li class="nav-item"> <a class ...

What is the best way to ensure that the child element of a Material UI TableCell Component occupies the full height of the cell?

I am currently using MUI version 5 to create a table. In this table, there are two columns with cells that contain multiline TextFields. My goal is to have the TextFields completely fill the cell area. However, I am encountering an issue where when I start ...