WordPress theme and MLA styling

Thanks for this question and for taking the time to document the problematic page.

I must admit that CSS is not one of my strong points, but here are some suggestions that might help. You have probably already tried some of them. I found this page of suggestions:

Centering Things

The easy answer is to fix the width of the enclosing < div >. For example, the first (thumbnail) gallery on your page can be set to a width of 35% and it will center itself because of the margin:auto property. As the “Centering Things” page says,

This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.

This only works if you know how many items are in the gallery, though.

The other approach is to create a custom MLA Gallery template and change from a div-based template to a table-based template, because a table can be centered with align=center. If you consider the align attribute obsolete you can still construct a table of variable width and rely on the margin=auto to center it.

There is a table-based template in the Settings/Media Library Assistant Documentation tab you can use as a starting point. I am about to leave town for a week and unable to build and test a specific example for you. Give the table idea a try and let me know how it goes. I can give you more help when I return from my travels.

Thank you for your understanding and your patience.

I am back home and had a bit more time to spend on this issue. Here is a fairly simple table-based style and template that works with the WordPress Twenty Twelve theme.

Style Template

<style type='text/css'>
	#[+selector+] {
		width: 300px;
		margin: auto;
	}
	#[+selector+] .gallery-row {
		margin-top: 10px;
		border-top: 1px solid #ddd;
		text-align: center;
	}
	#[+selector+] .gallery-row td.gallery-icon {
		width: 60px;
		height: 60px;
		vertical-align: top;
	}
	#[+selector+] .gallery-row .gallery-icon img {
		border: 2px solid #cfcfcf;
	}
	#[+selector+] .gallery-caption {
		margin-left: 0;
		vertical-align: top;
	}
</style>
<!-- see mla_gallery_shortcode() in media-library-assistant/includes/class-mla-shortcodes.php -->

Markup Template, Open

<table id='[+selector+]' class='gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]'>

Markup Template, Row Open

<tr class='gallery-row'>

Markup Template, Item

<td class='gallery-icon'>
	[+link+]<br>[+caption+]
</td>

Markup Template, Row Close

</tr>

Markup Template, Close

</table>

The first style, #[+selector+], gives the table its total width and the margin: auto; style is all that’s required to center the table in its enclosing container.

If you found a different and/or better approach it would be great to share it here for all interested parties. Thanks again for raising an interesting and useful topic.