Align the content at the center within a Bulma column

I am working with multiple columns, each column containing a circle in the CSS depicted as a font awesome icon centered within it. However, I am facing an issue where the circle remains aligned to the left while the text itself gets centered.

HTML

<div class="features">
  <div class="container">
    <div class="columns is-mobile ">
      <div class="column">
        <div class="community">
          <font-awesome-icon col size="2x" :icon="['fas', 'tasks']" />
        </div>
        Features
      </div>
    </div>
  </div>
</div>

CSS

.features {
  background: #2a3a4c;
  height: 200px;
}

.community {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
htmlcssbulma

Answer №1

<div class="columns is-centered">...</div>
aligns the column in the center. It is necessary to define a width for the column inside to ensure it functions correctly. The class is-narrow occupies only the required space.

Sample

.features {
  background: #2a3a4c;
}

.features .columns {
  height: 200px;
}

.circle {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="features">
  <div class="container">
    <div class="columns is-centered is-vcentered is-mobile">
      <div class="column is-narrow has-text-centered">
        <div class="circle">
          <font-awesome-icon col size="2x" :icon="['fas', 'tasks']" />
        </div>
        Features
      </div>
    </div>
  </div>
</div>

For further details, visit: Bulma columns sizes

Answer №2

Center your text, buttons, or images with this simple code:

To the HTML content, include:

class="has-text-centered"

If you prefer to center a file upload input:

Add this to the HTML content:

class="is-centered"

Answer №3

Is it necessary to use table-cell for styling .community? It doesn't seem to be making any difference. If not, you can make the following adjustments:

.community {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

Change it to:

.community {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
  border-radius: 100%;
  text-align: center;
  margin: 0 auto;
}

Add this as well:

.column {
  text-align: center;
}

This will ensure everything is centered properly.

You can view a working example at https://codepen.io/anon/pen/odQGoj

PS: Don't forget to include a closing </div> for <div class="features">

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

Can you set up an automatic redirect after a payment is made on paypal.me?

Is there a way to automatically redirect users to a "successful payment" landing page after they make a payment on paypal.me? While PayPal offers an "Auto Return" feature, I am uncertain if it is applicable for paypal.me or if there are alternative methods ...

htmlredirectpaypalpaymentpayment-processing

Large background images on websites often appear pixelated

Check out my website: I've noticed that the background image appears blurry on my screen, despite its size being 1920 x 1080 px. I've tried using a jquery script to manage this background issue as all of the CSS methods have provided unsatisfact ...

jquerycssimagewebbackground

PHP email not going through, stuck on an empty screen

In the process of creating a PHP form mailer, I have encountered multiple obstacles and none of the versions seem to work. My goal is for the information submitted via the form to be automatically sent through email when the 'Submit' button is cl ...

phphtmlformsemailform-submit

Extracting Data from JSON Using Vue.js

I am facing an issue with extracting data from a JSON file using Vue.js. Below is the HTML and JSON data along with the script. Any help would be appreciated. <!DOCTYPE html> <html> <head> <title>Vu ...

javascripthtmljsonvue.js

Having issues with ng-view in AngularJs - it's not functioning properly

I am having trouble with the ng-view directive not working. When I implement it, all I see is the "Page" title. Can someone help me diagnose the issue? https://jsfiddle.net/dsgfdyp1/3/ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/b ...

javascripthtmlangularjsng-view

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

javascripthtmlmodel-view-controllerhandlebars.js

jquery conflict between parent div hover function and child's hover function

I am experiencing an issue with a hover function on a parent element and child event. It seems that the child hover function is not working when hovering over the parent. Specifically, I have set up a hover function on both the "univ" div and the "heading ...

javascriptjqueryhtml

Experimenting with @media queries to dynamically resize images for various devices such as phones, tablets, and desktop

I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...

htmlcssbootstrap-4media-queries

Mentioning VARs found on additional pages

I'm currently designing a website. At the moment, I have set up the site to prompt users for their name on the landing page and store it in a string variable. var username = ""; Once users enter their name and click "Enter Site," they are directed ...

javascriptjqueryhtml

How to Restrict the Number of Rows Displayed in an Angular 4 Table

Currently, I am faced with a situation where I have a lengthy list of entries that I need to loop through and add a row to a table for each entry. With about 2000 entries, the rendering process is slowing down considerably. Is there a way to limit the disp ...

htmlangulartypescript

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

javascripthtmlarraysvariables

The HTML element in the side menu is not adjusting its size to fit the parent content

Update: What a day! Forgot to save my work... Here is the functioning example. Thank you for any assistance. I have set up a demo here of the issue I'm facing. I am utilizing this menu as the foundation for a page I am developing. The menu is built ...

jqueryhtmlcsstwitter-bootstrap

HTML5 Boilerplate and optimizing the critical rendering path by deferring scripts and styles

Previously, I constructed my website layouts using the HTML5 Boilerplate method: incorporating styles and Modernizr in the head section, jQuery (either from Google CDN or as a hosted file) along with scripts just before the closing body tag. This is an exa ...

javascriptjquerycssperformancedeferred-rendering

Is it advisable to incorporate the <main> element in my code?

While browsing through w3schools, I came across the <main> element. However, according to caniuse.com, this element is not supported by IE, Opera Mini, and the UC Browser for Android. Should I opt for using a <main> element instead or stick wi ...

htmlprogram-entry-point

How can jQuery be used to determine if the number of checked checkboxes is a multiple of three?

Within the ul, I have li tags with checkboxes and I want to create a function that checks, when the submit button is pressed, if the number of checked checkboxes is not a multiple of 3. If it isn't, an alert should be displayed. How can I accomplish t ...

javascriptjqueryhtmlcheckbox

Left-hand navigation panel that complements entire screen

Web Design .sidenav { height: 100%; position: relative; overflow-y: scroll; background: #000000; width: 15%; } Ensuring the menu covers the full screen correctly by setting its height to 100% is effective, but it may appear awkward wh ...

htmlcssheight

Determining the condition of the menu: understanding whether it is open or closed

I'm diving into the world of jQuery and JavaScript, trying to grasp the ins and outs of the mmenu API. Despite my efforts to understand the libraries, the JavaScript code remains a mystery to me. Following the tutorial provided on , I successfully cr ...

javascriptjqueryhtmlcssmmenu

Manipulating database records with Laravel 5.0: deleting and modifying data

Is there a way to manage database entries in Laravel 5.0 using the public functions destroy and edit? I am working on my library and need to make changes to the database entries @foreach ($allJobs as $job) <tr> <td><img src="{{ ...

phphtmllaravel

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

Is there a way to automatically clear all typed characters in form fields when switching between radio buttons with the same ngModel on different pages? I noticed that the characters I type in one field are retained when I switch to another radio button. ...

htmlangulartypescript

Tips for centering the search popup in jqgrid

Having trouble centering the Search popup in my jqgrid. Every time I click on the search button in jqgrid, the Search popup appears at the beginning of the grid. $(document).ready(function(){ //jqGrid $("#usersList").jqGrid({ ...

jquerycssjqgrid