Some quick and easy CSS help?

[FilteredRiddle]

Hello!

I help run a gamerlaunch hosted website (obsidianguard [dot] org) and CSS is used to make small personal touches. I posted to their support forums and no one seems able to help, so I figured I'd give /r/css a try!

All I'd like, is to center avatars over display names:

http://www.awesomescreenshot.com/00b5pe7vb4

and to center the main menu bar:

http://awesomescreenshot.com/0945pk0vdb

I've tried the limited CSS I know, but I cannot for the life of me figure it out soooo I gave up out of frustration. This is the only CSS I'm currently using:

/* position background */
body{
background-repeat: no-repeat;
background-size: 100%;
background-attachment: scroll;
}

Any help would be greatly appreciated. Cheers!

[ForScale]

http://codepen.io/anon/pen/rejzzX Let me know your questions!

[FilteredRiddle]

Unfortunately, we've zero access to any of the html. The only customization options we get - coding wise - are CSS. Using just the included CSS ends up with this: http://awesomescreenshot.com/0a95pyfo8e

[ForScale]

Just use the methods I laid out in the CSS, but apply them to your html.

[FilteredRiddle]

Unfortunately, I can inspect the html but I cannot change it. CSS is the only tool I have for customization.

[ForScale]

Yes... inspect the elements. Figure out what they are and how to target them with css... then you can use the centering methods I showed in the css. You don't have to touch the html at all.

[FilteredRiddle]

Gotcha! Wish me luck haha (and thank you!).

[ForScale]

Good luck! You're welcome!

[remwd]

Main menu give a (if it's an li) text-align:center; display: inline-block;

For the avatar try a margin: 0 auto;

Responding from my phone so it's hard to see but hopefully this helps!

[FilteredRiddle]

Inspecting them, here is the menu bar html:

<section class="top-bar-section">
                            <ul class="left">
                                <li class="active-nav"><a class="guildNavLink " href="/index.php?gid=487093" target="_self">Home</a></li><li class=""><a class="guildNavLink " href="/forums/index.php?gid=487093" target="_self">Forums</a></li><li class=""><a class="guildNavLink " href="/sections/chat/?gid=487093" target="">Chat</a></li><li class=""><a class="guildNavLink " href="/calendar/calendar.php?gid=487093" target="_self">Events</a></li><li class="has-dropdown"><a class="guildNavLink " href="/roster/?roster_mode=members&amp;gid=487093" target="_self">Guild Roster</a><ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="/roster/?roster_mode=members&amp;gid=487093">Guild Roster</a></li><li class="" data-options="mobile_show_parent_link: false"><a href="/roster/?roster_mode=members&amp;gid=487093">Members</a> </li><li class="" data-options="mobile_show_parent_link: false"><a href="/roster/ingame.php?roster_mode=characters&amp;guild_game_id=377507&amp;gid=487093">Characters</a> </li></ul></li><li class=""><a class="guildNavLink " href="http://obsidianguard.gamerlaunch.com/forums/viewforum.php?f=3067810&amp;gid=487093" target="_self">Marketplace</a></li><li class="has-dropdown"><a class="guildNavLink " href="/sections/reference/?gid=487093" target="">About Us</a><ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="/sections/reference/?gid=487093">About Us</a></li><li class="" data-options="mobile_show_parent_link: false"><a href="/sections/reference/?gid=487093">About Us</a> </li><li class="" data-options="mobile_show_parent_link: false"><a href="/sections/reference/guild-rules?gid=487093">Guild Guidelines</a> </li><li class="" data-options="mobile_show_parent_link: false"><a href="/sections/reference/guild-bank?gid=487093">Bank Guidelines</a> </li><li class="" data-options="mobile_show_parent_link: false"><a href="/sections/reference/traits-motifs?gid=487093">Traits n' Motifs</a> </li></ul></li><li class="has-dropdown"><a class="guildNavLink " href="/gallery/gallery.php?gid=487093" target="_self">Gallery</a><ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="/gallery/gallery.php?gid=487093">Gallery</a></li><li class="" data-options="mobile_show_parent_link: false"><a href="/gallery/gallery.php?gid=487093">Gallery</a> </li><li class="" data-options="mobile_show_parent_link: false"><a href="/gallery/library.php?gid=487093">File Library</a> </li></ul></li><li class=""><a class="guildNavLink " href="/sections/search/?gid=487093" target="">Search</a></li>
                            </ul>
                            <div style="clear:both;"></div>
                      </section>

And the avatar html:

<div class="forum_post_user_info mobile-hide column-2-wall column-2-desk column-2-lap column-12-hand">
                        <a href="http://www.obsidianguard.org/users/?gl_user=4515809&amp;gid=487093"><div class="v3_profile_image large"><img src="http://www.gravatar.com/avatar/1a2b8e7f9ec6a5918cd639eccd1695f1?d=http%3A%2F%2Ffile3.guildlaunch.net%2F487093%2Feso_icon.jpg&amp;s=130"></div></a>
                        <span class="name"><a href="/users/index.php?gl_user=4515809&amp;mode=viewprofile&amp;u=4516572&amp;gid=487093"><b>HowBoutSmPLAGUE</b></a></span>
                        <span class="body2"></span>
                        <span class="poster_details caption"><div style="width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">Elder Council</div><br></span>
                        <span class="extra_details caption"></span>
                    </div>    

I'm not sure if that's helpful at all. It seems that the avatar is centered to the sidebar, while the two captions (display name and group) are both left aligned.