html - 如何使页脚内的内容块居中
问题描述
为粘贴一个大的 html 道歉，但我一直在努力修复 css，尝试缩短代码需要太多的工作，所以我想显示完整的屏幕截图和它背后的代码。
如果您查看屏幕截图，页脚内的整个内容块更靠近左边缘。我希望整个内容块位于中心，但不知道该怎么做。
基本 CSS：
.footer_wrap .columns_wrap {
margin-left: 30px; // this actually does shift the content more to the right but don't think this is idea in terms definite have it smack bang in the centre
margin-right: 0px;
}
.footer_wrap {
float: left;
width: 100%;
}
HTML：
<footer class="footer_wrap widget_area scheme_original">
<div class="footer_wrap_inner widget_area_inner">
<div class="content_wrap">
<div class="columns_wrap">
<aside id="text-4" class="widget_number_6 column-1_5 widget widget_text">
<div class="textwidget">
<div class="logofooteri"><img src="https://balancecoffee.co.uk/stage/wp-content/uploads/2021/04/123d.png"></div>
<div class="socialfooter" style="padding-bottom: 15px; margin-bottom: 10px;">
<p><a style="float: left; margin-right: 12px;" href="https://www.instagram.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Instagramwhite.svg" width="30px" height="30px"></a><a style="float: left; margin-right: 12px;" href="https://www.facebook.com/balancecoffee20" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Facebookwhite.svg" width="29px" height="29px"></a></p>
<p><a style="float: left; margin-right: 12px;" href="https://twitter.com/BalanceCoffeeUK" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Twitterwhite.svg" width="30px" height="30px"></a></p>
<p><a style="float: left; margin-right: 12px;" href="https://www.pinterest.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Pinterestwhite.svg" width="30px" height="30px"></a></p>
</div>
<div class="footer-address">Kemp House, 152-160 City Road,<br>
London, EC1V 2NX
</div>
<div class="footer-address">info@balancecoffee.co.uk</div>
</div>
</aside>
<aside id="nav_menu-6" class="widget_number_7 column-1_5 widget widget_nav_menu">
<h5 class="widget_title">ACCOUNT</h5>
<div class="menu-account-footer-container">
<ul id="menu-account-footer-1" class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7970"><a href="https://balancecoffee.co.uk/stage/?page_id=285">Sign In</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7971"><a href="https://balancecoffee.co.uk/stage/?page_id=6089">Earn Rewards</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7968"><a href="https://balancecoffee.co.uk/stage/?page_id=4561">Manage Subscription</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7969"><a href="https://balancecoffee.co.uk/stage/?page_id=1109">FAQs</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7967"><a href="https://balancecoffee.co.uk/stage/?page_id=1032">Contact</a></li>
</ul>
</div>
</aside>
<aside id="nav_menu-7" class="widget_number_8 column-1_5 widget widget_nav_menu">
<h5 class="widget_title">SHOP</h5>
<div class="menu-shop-footer-container">
<ul id="menu-shop-footer-1" class="menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7995"><a href="https://balancecoffee.co.uk/stage/?cat=69">Coffee</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7978"><a href="https://balancecoffee.co.uk/stage/?product_cat=subscription-coffee">Subscription Coffee</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7980"><a href="https://balancecoffee.co.uk/stage/?product_cat=coffee-equipment">Coffee Equipment</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4757 current_page_item menu-item-7989"><a href="https://balancecoffee.co.uk/stage/?page_id=4757" aria-current="page">Sage Coffee Machines</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7979"><a href="https://balancecoffee.co.uk/stage/?product_cat=oat-milk-coffee-bundles">Oat Milk</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7985"><a href="https://balancecoffee.co.uk/stage/?product_cat=coffee-gifts">Coffee Gifts</a></li>
</ul>
</div>
</aside>
<aside id="nav_menu-8" class="widget_number_9 column-1_5 widget widget_nav_menu">
<h5 class="widget_title">ABOUT</h5>
<div class="menu-about-footer-menu-container">
<ul id="menu-about-footer-menu-1" class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8015"><a href="https://balancecoffee.co.uk/stage/?page_id=1012">Our Story</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8038"><a href="https://balancecoffee.co.uk/stage/?page_id=1054">Sustainability</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8039"><a href="/">Affiliates</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8040"><a href="https://balancecoffee.co.uk/stage/?page_id=1109">FAQs</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8041"><a href="/">Press</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8042"><a href="/">Become an Affiliate</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8043"><a href="https://balancecoffee.co.uk/stage/?page_id=2410">Become a Stocklist</a></li>
</ul>
</div>
</aside>
<aside id="nav_menu-9" class="widget_number_10 column-1_5 widget widget_nav_menu">
<h5 class="widget_title">BARISTA SCHOOL</h5>
<div class="menu-barista-school-footer-menu-container">
<ul id="menu-barista-school-footer-menu-1" class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8035"><a href="https://balancecoffee.co.uk/stage/?page_id=3249">Coffee Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4757 current_page_item menu-item-8032"><a href="https://balancecoffee.co.uk/stage/?page_id=4757" aria-current="page">Sage Coffee Machines</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8031"><a href="https://balancecoffee.co.uk/stage/?page_id=3238">Coffee Videos</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8033"><a href="https://balancecoffee.co.uk/stage/?page_id=3241">Coffee Recipes</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8034"><a href="https://balancecoffee.co.uk/stage/?page_id=3252">Tips & Hacks</a></li>
</ul>
</div>
</aside>
<div class="abovecontentright">
<img src="https://balancecoffee.co.uk/stage/wp-content/uploads/2021/04/23ewd.jpg">
</div>
</div>
<!-- /.columns_wrap -->
</div>
<!-- /.content_wrap -->
</div>
<!-- /.footer_wrap_inner -->
</footer>
解决方案
由于您没有发布工作示例，甚至没有发布完整的样式来重现您的代码，我只能猜测下一个解决方案。
从应用width:100%;到包装器和margin-right: auto, margin-left: auto;块应该居中开始。这是一种使块居中的老式方法，但应该可以正常工作。
<div class="footer_wrap_inner widget_area_inner">
<div class="content_wrap">
<div class="columns_wrap">
看起来它将是width: 100%和footer_wrap_inner，content_wrap和margin-right: auto, margin-left: auto;。columns_wrap但是你需要检查一下。
另外，我看到您在代码中使用了浮点数，最好用 flex 重写代码并使用其内置的居中功能（甚至在 的帮助下将内容对齐到两边justify-content: space-between）
推荐阅读
- java - Spring Boot - War中的JSP表单提交问题
- amazon-web-services - 雅典娜中 YYYY-MM-DD 日期格式的字符串
- r - html_nodes 提取 1 个数字需要很长时间
- javascript - 如何使用 ffi 在 javascript 中输入 c struct 指针？
- google-oauth - Google One-Tap Sign-Up 是否适用于 Chrome 以外的浏览器？
- laravel - 关于专辑、艺术家、曲目和标签之间关系的建议（音乐素材）
- matlab - 将三维数组简化为有效数字的向量
- javascript - 访问时，HTMLCollection 似乎正在丢失所有其他元素
- angular - ng-zorro NzDrawerService nzOffsetX 动态
- c# - 不断重复类构造函数 - 类对象似乎正在实例化自己