Can't center align footer content

  • Resolved barnez

    (@pidengmor)


    10 years, 11 months ago

    Hi,
    I’m struggling to center align the page links in my footer. The footer php is:

    <div id="footer">

			<div class="wrap">

				<div id="footerColumn"><?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar('Footer: Right'); ?></div>

				<?php wp_nav_menu( array( 'container' => '', 'container_class' => '', 'menu_class' => '', 'depth' => '1', 'menu_id' => 'menufooter', 'sort_column' => 'menu_order', 'theme_location' => 'secondary' ) ); ?>

				<p class="copy">Copyright ? <?php echo date('Y', time()); ?> <?php bloginfo('name'); ?>. All rights reserved. <?php _e('WordPress Theme', 'wpzoom'); ?> <?php _e('by', 'wpzoom'); ?> <a href="https://www.wpzoom.com" target="_blank" title="WordPress Themes">WPZOOM</a></p>

				<div class="clear">?</div>

			</div><!-- end .wrap -->

		</div><!-- end #footer -->

	</div><!-- end #wrap -->

	<?php wp_footer(); ?>

</body>
</html>

    I have tried adding the following to the style.css:

    #footer p {
  text-align: center;
}

    or

    #footerColumn p {
  text-align: center;
}

    but nothing changes. The site url is: https://www.englishlc.com

    Any suggestions for where I’m going wrong ….

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello,

    your page renders `<div id="footer">
    <div class="wrap">
    <div id="footerColumn"></div>
    <ul id="menufooter" class="">`

    Try some mods to the css for #footer:
    `#footer {
    text-align: center;
    }and also check what is in your css for class .wrap - you might need.wrap {
    text-align: center;
    }`

    I also note that the class attribute of menufoofer is empty. is that intentional?

    SideKick Dan

    (@shout-out-sidekick)

    Hello Barnez,

    try changing

    #footer ul (likely in your style.css file around line #252) to this…

    #footer ul {
display: block;
margin:0 auto;
width: 660px;
}

    the area basically is not centarable , if that’s even a word, via text-align. sometimes it has to be done using a css style such as margin:0 auto; and assigning a smaller-than-100 percent width to the element. Personally not sure the exact reason, but usually text-align works well for paragraph contained elements, but not so much div ones. I’m sure there’s a technical reason, but don’t know it yet ?? I did try the above edit using firebug css inspector and it worked fine. Let me know ??

    Best Regards,
    Danny

    Replace your css with my css.this will help you.

    #footerColumn {
margin: 0 0 10px 10px;
}

    Next:

    Remove width

    #footer ul {
display: block;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

    Remove float:left

    #footer ul li{
clear: right;
display: inline;
font-size: 11px;
font-weight: bold;
line-height: 18px;
margin-right: 15px;
text-align: center;
}

    This will might help you.

    Thanking you.
    Somin

    Thread Starter barnez

    (@pidengmor)

    Hi wiresplus & Danny,

    Thanks for both your suggestions, as I had run out of options in my novice css toolkit.

    In the end your advice about using #footer ul did the trick Danny, and the footer page links are now center aligned!! Your views about the reasons why sounds logical, as all my previous attempts were more suited to paragraph containing elements. It all makes more sense now ??

    Many thanks again, and Merry Christmas (if that is your thing).
    Barnez

    Thread Starter barnez

    (@pidengmor)

    Hi Somin,

    I had just managed to resolve the problem as you posted. Thanks for taking a look and offering your suggestions.

    Much appreciated!
    Barnez

    SideKick Dan

    (@shout-out-sidekick)

    Glad to hear it worked! ??

    If you add more links down there and it gets wider, you may just have to adjust the width some.

    Best Regards,
    Danny ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Can't center align footer content’ is closed to new replies.