CODEWITHSUNDEEP
css-positionoverlaycenterfont-awesomeabsolute
Maze
Maze

Reputation: 452

How to absolutly center an overlaid Font Awesome icon?

Been trying to get a overlay effect with a icon display going.

what after is getting the icon/text absolutely centered in the grey space. and not show with class hidden - or removing the class that displays this busy overlay.

tried margin: 0 auto and margin:auto not much luck. using width:100% and height in different combos has various effects

here is a base setup

https://jsfiddle.net/f8eo7y3w/1/

table {
  width:100px;
  height: 100px;
}

.busy-indicator {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.33);
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class='container'>
  <div class="row">
    <div class="col-xs-12">
      <p>
        some other stuff not busy
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-10">
      <div>
        <table class='busy'>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
        </table>

        <div class="busy-indicator">
          <i class="fa fa-spin fa-refresh"></i>
        </div>

      </div>
    </div>
  </div>



  <div class="row">
    <div class="col-xs-12">
      <p>
        some other stuff not busy
      </p>
    </div>
  </div>
</div>

initial start was if something could be done on the table, instead of adding a element after the table like using ::before - but i think issues with cant do html on the before/after content?

Flexible width height of table, if worked on any element would be great but div/table more then enough.

I tried using example from;

Center content in a absolute positioned div

center using display:table (switch i fa icon to span text for display)

https://jsfiddle.net/39L7tqbr/

result is - busy-indicator losses background-color and content still not vertically centered

some class missing, or am i making more complicated than needs be????

Upvotes: 1

Views: 2747

Answers (1)

Chiller
Chiller

Reputation: 9738

to achieve this and make the icon in the center we need to wrap the <i> tage inside another element another <div> for example, because if we try to center the <i> directly we will have some kind of conflict with the font-awsome animation , so we just need to center the div wraping the <i> tag:

HTML:

<div class="busy-indicator">
  <div>
      <i class="fa fa-spin fa-refresh"></i>
  </div>
</div>

CSS:

.busy-indicator > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

this will center the icon in the busy-indicator div

Upvotes: 2

Related Questions