Center Image In Bulma


Answer :

Make the figure tag an inline-block and assign has-text-centered to the parent tag. Advantage is no custom code needed.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/> <div class='column is-one-quarter'>   <div class='card equal-height'>     <div class="card-image has-text-centered">         <figure class="image is-64x64 is-inline-block">             <img class="is-rounded" src="https://unsplash.it/64"/>         </figure>     </div>     <div class='card-content'>       <!-- other content here -->     </div>   </div> </div>


Change the display property of card-content to flex by using the .is-flex modifier.

Now you can use flexbox properties to horizontally center the figure. There is no modifying class for this with Bulma, so you can make your own...

.is-horizontal-center {   justify-content: center; }

Add this to card-content and you're done.

.is-horizontal-center {   justify-content: center; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/> <div class='column is-one-quarter'>   <div class='card equal-height'>     <div class='card-content is-flex is-horizontal-center'>       <figure class='image is-64x64'><img src='https://unsplash.it/64'></figure>     </div>   </div> </div>


You can also use a .level element found in the Bulma layout section. The level elements are what Bulma uses to assist with specific vertical and horizontal centering of elements such as images and things other than text. You can find more information about it here. 

<!DOCTYPE html> <html lang="en">  <head>   <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" /> </head>  <body>   <div class='column is-one-quarter has-text-centered'>     <div class='card equal-height'>       <div class='card-content'> <!-- Place image inside .level within your card element -->         <nav class="level">           <div class="level-item has-text-centered">             <figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/128x128.png'></figure>           </div>         </nav>  <!-- And it'll be centered like so -->       </div>     </div>   </div> </body>  </html>

Note: In order to have multiple elements (i.e. Such as an image and text) horizontally centered and vertically centered, all you have to do is place .level elements underneath each other:

<!DOCTYPE html> <html lang="en">  <head>   <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" /> </head>  <body>   <div class='column is-one-quarter has-text-centered'>     <div class='card equal-height'>       <div class='card-content'>         <!-- Place image inside .level within your card element -->         <nav class="level">           <div class="level-item has-text-centered">             <figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/128x128.png'></figure>           </div>         </nav>         <nav class="level">           <div class="level-item has-text-centered">             <h1>Title to image</h1>           </div>         </nav>         <!-- And it'll be centered like so -->       </div>     </div>   </div> </body>  </html>


Comments

Post a Comment

Popular posts from this blog

Chrome Ipad Extensions Code Example

Example: chrome extension on ipad No, Chrome extensions do not work on iPad or iPhone. There is no web browser for the iPad that allows a desktop-level extension. It is not Apple’s policy to allow developers to include downloadable module engines in their apps, for multiple reasons which also include Apple’s security restrictions.
Read more

AngularJS $on Event Handler Trigger Order

Answer : Very good question. Event handlers are executed in order of initialization. I haven't really thought about this before, because my handlers never needed to know which one run first, but by the look of you fiddle I can see that the handlers are called in the same order in which they are initialized. In you fiddle you have a controller controllerA which depends on two services, ServiceA and ServiceB : myModule .controller('ControllerA', [ '$scope', '$rootScope', 'ServiceA', 'ServiceB', function($scope, $rootScope, ServiceA, ServiceB) {...} ] ); Both services and the controller define an event listener. Now, all dependencies need to be resolved before being injected, which means that both services will be initialized before being injected into the controller. Thus, handlers defined in the services will be called first, because service factories are initialized before contro...
Read more