Question: Instead of using jQuery, I would like to bind callbacks to Semantic-UI modules the "Meteor-way", a bit like Bootstrap 3 allows for, e.g.:

```js
Template.someTemplate.events({
  'show.bs.dropdown .someDropdown': function () {
    // official Bootstrap JS callback for the Dropdown module's show event
  }
});

```

With Semantic-UI it seems like I can only define the callback functions when using jQuery bindings in the containing Template's `onRendered()` callback, e.g.:

```js
Template.someTemplate.onRendered( function () {
  this.$('.someDropdown').dropdown({
    'onShow': function () {
      // official Semantic-UI JS callback for the Dropdown module's show event
    }
  });
});

```

This isn't optimal because (a) other DOM elements might not be ready for manipulation during a particular Template's `onRendered()` callback, and (b) it makes separation of concerns & code clarity far harder to achieve.

Is there a way to bind these events using Meteor's `Template.events`, and if so, what is the correct syntax to accomplish this?

Thanks.

Answer: 
First, be carefull. When you use `position:absolute` you have to add `position:relative` to the parent you want to position your element with. In your first jsfiddle it looked like it's working because your `a`, `div` and `body` are in the same position. In the second, your image gets "lost" because you added a span wrapper.

You can use this css:

```
top:50%;
transform: translateY(-50%);

```

With both absolute and relative position and you will always be sure that whatever the container or your element height it will always be centered.

so I added these properties to your current ones:

```
.spanText {    
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

.imgWrapper{
    top:50%;
    transform: translateY(-50%);
}

a {position:relative;}

```

and it's working (try changing the "200px" height to whatever you wish:

**[JSFIDDLE](https://jsfiddle.net/alvaromenendez/CtH9k/5826/)**
you can try this one:

```
 <div>
        <a href="#">
            <span class="imgWrapper">
                <img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /></span>
        <span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </a>
    </div>

```

[DEMO FIDDLE](https://jsfiddle.net/ivinraj/CtH9k/5822/)