CMS Development

bshirshekar1
Member

Need to center a module

SOLVE

Screenshot 2020-06-11 15.43.53.png

How do I center this module?

 

<div class="custom-team-group clearfix">
<div class="custom-team-heading-group" id="{{ module.bookmark_id }}">
<h2>{{ module.heading }}</h2>
</div>
<div class="custom-team-inner-group clearfix">
{% for item in module.item %}
<div class="custom-team-item ">
<div class="custom-team-inner-item matchHeight">
<div class="image">
<a href="{{ item.team_member_url_link }}">
{% if item.image_field.src %}
{% set sizeAttrs = 'width="{{ item.image_field.width }}" height="{{ item.image_field.height }}"' %}
{% if item.image_field.size_type == 'auto' % }
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif item.image_field.size_type == 'auto_custom_max'%}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.image_field.max_width }}px; max-height: {{ item.image_field.max_height }}px"' %}
{% endif %}
<img src='{{ item.image_field.src}}' alt=' {{i tem.image_field.src}}' {{sizeAttrs}} style='border-radius: 50%'>
{% endif %}
</a>
</div>
<h3>{{ item.member_name }}</h3>
<p>{{ item.designation }}</p>
</div>
</div>
{% endfor %}
</div>
</div>

 

0 Upvotes
1 Accepted solution
Chris-M
Solution
Top Contributor

Need to center a module

SOLVE

Hi @bshirshekar1,

 

could you provide us with a preview link, a screenshot, or can you tell us what you want to center?

 

Out of the blue, i would recommend to use display: flex; with following proppertys:

style="display:flex; justify-content:center; align-items:center;"

With this you can center divs/elements horizontaly and verticaly.

 

We could provide you with a more specific answere if we know what you like to do.

 

- Chris

View solution in original post

1 Reply 1
Chris-M
Solution
Top Contributor

Need to center a module

SOLVE

Hi @bshirshekar1,

 

could you provide us with a preview link, a screenshot, or can you tell us what you want to center?

 

Out of the blue, i would recommend to use display: flex; with following proppertys:

style="display:flex; justify-content:center; align-items:center;"

With this you can center divs/elements horizontaly and verticaly.

 

We could provide you with a more specific answere if we know what you like to do.

 

- Chris