XF 2.2 I want to center Media

[MesterPerfect]

Hi
I want to put photos and videos in the center
How to do that

 

[Paul B]

Use the [center] tags or click on the align center button in the toolbar.

[CENTER][MEDIA=youtube]e4O-E3CZhdY[/MEDIA][/CENTER]

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

​

 

[MesterPerfect]

Use the [center] tags or click on the align center button in the toolbar.

[CENTER][MEDIA=youtube]e4O-E3CZhdY[/MEDIA][/CENTER]

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

​

i want to make it always by using css

 

[Digital Doctor]

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[Paul B]

Edit the _media_site_embed_youtube template and wrap the contents in a div, like so:

<div style="text-align: center">
    <div class="bbMediaWrapper">
    <div class="bbMediaWrapper-inner">
        <iframe src="https://www.youtube.com/embed/{$id}?wmode=opaque&start={$start}"
                width="560" height="315"
                frameborder="0" allowfullscreen="true"></iframe>
    </div>
    </div>
</div>

You will need to do it for each embed template you want to center.

 

[MesterPerfect]

Edit the _media_site_embed_youtube template and wrap the contents in a div, like so:

<div style="text-align: center">
    <div class="bbMediaWrapper">
    <div class="bbMediaWrapper-inner">
        <iframe src="https://www.youtube.com/embed/{$id}?wmode=opaque&start={$start}"
                width="560" height="315"
                frameborder="0" allowfullscreen="true"></iframe>
    </div>
    </div>
</div>

You will need to do it for each embed template you want to center.

this is good, but i want to center all media and images at once,, is i need to edit all templets? their isn't a single class?

 

[Paul B]

Identify the common class of all the content you want to center, if there is one, and edit the extra.less template to change the alignment.

Most likely it will be the .bbWrapper class.

 

[MesterPerfect]

Identify the common class of all the content you want to center, if there is one, and edit the extra.less template to change the alignment.

their is a common class or i must create one?

 

[Paul B]

Use the browser inspector - F12.

 

[MesterPerfect]

This is the solution

.bbOembed.bbOembed--loaded, .bbMediaWrapper {
    margin: 0 auto;
}

thank you @bousaid