Wrap Bootstrap navbar list items around centered brand image

Question

Ive been messing with this all night with no solution. I am using bootstrap 2.32 (for a joomla template, not support BS3 yet), and I will have a dynamic number of list items. I need for the list items to be centered, but also wrapped equally to the left and to the right of a centers .brand img. I could break it up into separate menus, but what would be the fun in that. So I have a Bootply up for testing purposes first. I'm open to any suggestions for accomplishing this.

Answer 1

You could just move the image into the center of the list, either with the backend or with javascript:

<script>
var $nav = $('.nav li');
var $middle = $nav.eq(Math.ceil($nav.length/2));
var $liWrappedImg = $('<li></li>').append($('.brand'));
$middle.before($liWrappedImg);
</script>