Adding labels for every image and adjusting float on span classes

[echow22]

Hello! 

I'm working on a module to display our agency certifications. The issue I have is the default left float for the span classes (Screenshot A). I want to center the badges across the module, not have it float left, so the spacing is equal on both sides. This is part of the code I have now that displays each badge:

 <div class="row-fluid-wrapper row-depth-1 row-number-2 ">
        <div class="row-fluid">
            <div class="badge span2 widget-span">
                {% if module.badge_one.src %}
                  <img src="{{ module.badge_one.src }}" alt="{{ module.badge_one.alt }}" width="{{ module.badge_one.width }}" height="{{ module.badge_one.height }}">
                {% endif %} 
            </div> 
            <div class="span2 widget-span">
                {% if module.badge_two.src %}
                	<img src="{{ module.badge_two.src }}" alt="{{ module.badge_two.alt }}" width="{{ module.badge_two.width }}" height="{{ module.badge_two.height }}">
                {% endif %}
            </div>

Screenshot A

The next issue I have is putting labels/text under each badge. I'm not sure what's the best way to do this. I've tried putting rich text boxes under each badge, but it appears behind the badge and not below it. Ideally, I'd like it to look like this (Screenshot B):

Screenshot B

I'd love some help on how to do this! I have a beginner coding skill level. This is the landing page I'm working with https://app.hubspot.com/content/135019/edit/5919393205/content and the module I'm working on https://app.hubspot.com/design-manager/135019/modules/21223527529.

Any help is appreciated.

[Kevin-C · Accepted solution]

Hey @echow22 

Because the parent container of floated spans is that .row-fluid, the easiest way to do this might be to wrap its contents (the spans) in another container an center than container:

<div class="row-fluid-wrapper row-depth-1 row-number-2 ">
  <div class="row-fluid">

    <div class="centered-cont">

      <div class="badge span2 widget-span">
        {% if module.badge_one.src %}
        <img src="{{ module.badge_one.src }}" alt="{{ module.badge_one.alt }}" width="{{ module.badge_one.width }}" height="{{ module.badge_one.height }}">
        {% endif %}
      </div>
      <div class="span2 widget-span">
        {% if module.badge_two.src %}
        <img src="{{ module.badge_two.src }}" alt="{{ module.badge_two.alt }}" width="{{ module.badge_two.width }}" height="{{ module.badge_two.height }}">
        {% endif %}
      </div>

    </div>

And CSS like:

.centered-cont {
  position: relative;
  display: block;
  width: 100%;
  max-width: 960px; /*what ever you max you want*/
  margin-left: auto;
  margin-right auto;
}