难以在页脚中居中元素

【问题标题】：Having difficulty centering elements in footer难以在页脚中居中元素
【发布时间】：2016-08-14 18:21:04
【问题描述】：

我的脚有 3 列。我想要做的是将内容集中在网站的主体内。现在所有的内容都在各自的 div 中左对齐。我无法在不使文本居中的情况下将内容居中。

Current Footer

footer#footer .dt-social {
       text-align: left;
     }
     footer#footer a {
       color: #fff;
     }
     footer#footer a:hover {
       text-decoration: none;
       border-bottom-width: 1px;
       border-bottom-style: dotted;
       border-bottom-color: rgba(255, 255, 255, 0.5);
     }
     footer#footer .widget_recent_entries ul li {
       padding-left: 0;
     }
     footer#footer .widget_recent_entries ul li .icon {
       display: none;
     }
     footer#footer #footer-left a {
       border: 0;
     }
     footer#footer .widget_text ul {
       padding-left: 0px;
     }
     footer#footer .widget_text ul .icon:before {
       font-family: "fontello";
       font-style: normal;
       content: '\ea43';
       margin-left: -20px;
       width: 0;
     }
     footer#footer .widget_text ul li {
       list-style: none;
       /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/
       padding: 5px 0 5px 0px;
     }
     footer#footer .widget_text ul li:last-child {
       border: none;
     }
     footer#footer .widget_text ul li i {
       font-size: 17px;
     }
     footer#footer .widget_text ul .children {
       margin-top: 5px;
       margin-bottom: -5px;
       padding: 0px;
     }
     footer#footer .widget_text ul .children li {
       padding: 5px 0 5px 20px;
       border: none;
     }
     footer#footer .widget_text ul.list-inline-icon li {
       border: none;
       padding: 0;
       width: 30px;
       height: 30px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       -webkit-border-radius: 50%;
       border-radius: 50%;
       background-clip: padding-box;
       background: none;
       margin-right: .5em;
     }
     footer#footer .widget_text ul.list-inline-icon li a {
       font-size: 30px;
       color: #ffffff;
       line-height: 0;
     }
     footer#footer .widget_text ul.list-inline-icon li a i {
       line-height: 1.4em;
       margin: 0;
     }
     footer#footer .widget_text ul.list-inline-icon li a:hover {
       color: #ffffff;
     }
     footer#footer .widget_text ul.list-inline-icon li:hover {
       color: #ffffff;
       border: 1px solid #f16338;
       background: #f16338;
     }
     footer#footer .sequence-twitter {
       min-height: 180px;
     }
     footer#footer .owl-theme .owl-controls {
       text-align: left;
     }
     footer#footer .owl-theme .owl-controls .owl-page span {
       background-color: #f16338;
       opacity: 1;
     }
     footer#footer .owl-theme .owl-controls .owl-page.active span {
       background: none;
       border: 2px solid #f16338;
     }
     footer#footer .widget_calendar a {
       color: #f16338;
     }
     footer#footer .widget_calendar a:hover {
       color: #b6340d;
     }
     footer#footer .widget_calendar #calendar_wrap {
       border: 0px solid #bdc3c7;
       padding: 20px;
     }
     footer#footer .widget_calendar #today {
       background-color: #f16338;
     }
     footer#footer .widget_calendar .pad {
       color: #515151;
     }
     footer#footer .widget_calendar th {
       text-align: center;
       line-height: 2;
     }
     footer#footer .widget_calendar td {
       text-align: center;
       line-height: 2;
     }
     footer#footer .widget_calendar thead th {
       color: #f16338;
     }
     footer#footer .widget_search {
       color: #ffffff;
     }
     footer#footer .widget_search .screen-reader-text {
       display: none;
     }
     footer#footer .widget_search #searchsubmit {
       display: none;
     }
     footer#footer .widget_search #s {
       border-width: 1px;
       border-style: solid;
       padding: 5px 5px 5px 30px;
       width: 100%;
       background: none;
       font-size: 0.8em;
       color: #fff;
     }
     footer#footer .widget_search i {
       padding: 5px 5px;
       position: absolute;
     }
     footer#footer .dt_widget_portfolio_posts .post-item {
       padding: 0px;
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure {
       -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
       transform-style: preserve-3d;
       height: 85px;
       width: 85px;
       overflow: hidden;
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure > div {
       overflow: hidden;
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure figcaption {
       -webkit-transition: -webkit-transform 0.3s;
       -moz-transition: transform 0.3s;
       -o-transition: transform 0.3s;
       -ms-transition: transform 0.3s;
       background: rgba(39, 11, 3, 0.6);
       opacity: 1;
       background-clip: padding-box;
       text-align: center;
       height: 85px;
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure figcaption a {
       display: table;
       display: block;
       width: 100%;
       height: 100%;
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure:hover figcaption,
     footer#footer .dt_widget_portfolio_posts .post-item figure.cs-hover figcaption {
       -webkit-transform: translate(0, -100%);
       -moz-transform: translate(0, -100%);
       -ms-transform: translate(0, -100%);
       -o-transform: translate(0, -100%);
       transform: translate(0, -100%);
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure .zoom-plus {
       width: 100%;
       height: 50px;
       position: relative;
       left: 0%;
       display: table-cell;
       text-align: center;
       vertical-align: middle;
       display: block;
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure .zoom-plus::before,
     footer#footer .dt_widget_portfolio_posts .post-item figure .zoom-plus::after {
       top: 50%;
       left: 50%;
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure .zoom-plus::before {
       content: '';
       width: 20px;
       height: 20px;
       position: absolute;
       display: block;
       border-bottom: #fff solid 1px;
       -webkit-transition: transform 0s;
       -moz-transition: transform 0s;
       -o-transition: transform 0s;
       -ms-transition: transform 0s;
       transition: transform 0s;
       -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
       -ms-transform: translate(-50%, 0);
       -o-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
     }
     footer#footer .dt_widget_portfolio_posts .post-item figure .zoom-plus::after {
       content: '';
       width: 20px;
       height: 20px;
       position: absolute;
       display: block;
       border-left: #fff solid 1px;
       -webkit-transition: transform 0s;
       -moz-transition: transform 0s;
       -o-transition: transform 0s;
       -ms-transition: transform 0s;
       transition: transform 0s;
       -webkit-transform: translate(0, 50%);
       -moz-transform: translate(0, 50%);
       -ms-transform: translate(0, 50%);
       -o-transform: translate(0, 50%);
       transform: translate(0, 50%);
     }
     footer#footer .widget_tag_cloud .tagcloud .tag {
       display: inline-table;
       font-size: 12px;
       background: none;
       border-width: 1px;
       border-style: solid;
       padding: 8px 10px;
       margin: 0 5px 5px 0;
     }
     footer#footer .widget_tag_cloud .tagcloud .tag a:hover {
       color: #ffffff;
     }
     footer#footer .widget_tag_cloud .tagcloud .tag:hover {
       background-color: #f16338;
     }
     footer#footer .widget_tag_cloud .tagcloud .tag:hover a {
       color: #ffffff;
     }
     footer#footer .woocommerce.widget_product_tag_cloud .tagcloud .tag {
       display: inline-table;
       font-size: 12px;
       background: none;
       border-width: 1px;
       border-style: solid;
       padding: 8px 10px;
       margin: 0 5px 5px 0;
     }
     footer#footer .woocommerce.widget_product_tag_cloud .tagcloud .tag a:hover {
       color: #ffffff;
     }
     footer#footer .woocommerce.widget_product_tag_cloud .tagcloud .tag:hover {
       background-color: #f16338;
     }
     footer#footer .woocommerce.widget_product_tag_cloud .tagcloud .tag:hover a {
       color: #ffffff;
     }
     footer#footer .widget_categories {
       font-size: 14px;
     }
     footer#footer .widget_categories select {
       width: 95%;
       border: 1px solid #bdc3c7;
       padding: 5px;
       color: #515151;
     }
     footer#footer .widget_categories a.select-target {
       background: none;
     }
     footer#footer .widget_archive {
       font-family: 'Dosis';
     }
     footer#footer .widget_archive li {
       border-bottom: 1px solid #bdc3c7;
     }
     footer#footer .widget_archive select {
       width: 95%;
       border: 1px solid #bdc3c7;
       padding: 5px;
       color: #515151;
     }
     footer#footer .widget_archive a.select-target {
       background: none;
     }
     footer#footer .widget_recent_comments a {
       font-style: italic;
       color: rgba(255, 255, 255, 0.4);
     }
     footer#footer .widget_recent_comments a:hover {
       color: #f16338;
     }
     footer#footer .widget_recent_comments .comment-author {
       /*color: @white;*/
     }
     footer#footer .widget_recent_comments li.recentcomments {
       /*border-color: @footer-border-color;*/
     }
     footer#footer .dt_widget_tabs .nav-tabs li a {
       background: none;
       border-width: 1px;
       border-style: solid;
     }
     footer#footer .dt_widget_tabs .nav-tabs li a:hover {
       color: #ffffff;
       background-color: #f16338;
     }
     footer#footer .dt_widget_tabs .nav-tabs li:hover {
       background-color: #f16338;
     }
     footer#footer .dt_widget_tabs .nav-tabs li.active a {
       background-color: #f16338;
       border: 1px solid #f16338;
       color: #ffffff;
     }
     footer#footer .dt_widget_tabs .nav-tabs li.active a:hover,
     footer#footer .dt_widget_tabs .nav-tabs li.active a:focus {
       color: #ffffff;
       background-color: #f16338;
       border: 1px solid #f16338;
       border-top: 3px solid #f16338;
     }
     footer#footer .dt_widget_tabs .tab-pane {
       overflow: hidden;
     }
     footer#footer .dt_widget_tabs .tab-pane .rowlist {
       float: left;
       width: 100%;
       padding: 15px 0;
     }
     @media (max-width: 1200px) {
       footer#footer .dt_widget_tabs .nav-tabs li {
         display: block;
         width: 100%;
       }
     }
     footer#footer .dt_widget_accordion .btn-accordion {
       position: absolute;
       right: 30px;
       margin-top: -25px;
       color: #ffffff;
       background-color: #f16338;
     }
     footer#footer .dt_widget_accordion .opened {
       color: #f16338;
       background-color: #ffffff;
     }
     footer#footer .dt_widget_accordion .panel {
       margin-top: 10px !important;
       border: none;
       background: none;
     }
     footer#footer .dt_widget_accordion .panel:first-child {
       margin-top: 0px !important;
     }
     footer#footer .dt_widget_accordion .panel-heading {
       background: none;
       color: #ffffff;
       border-width: 1px;
       border-style: solid;
       -webkit-transition: background-color 0.8s;
       -moz-transition: background-color 0.8s;
       -o-transition: background-color 0.8s;
       -ms-transition: background-color 0.8s;
       transition: background-color 0.8s;
     }
     footer#footer .dt_widget_accordion .openedup {
       color: #ffffff !important;
       background-color: #f16338;
       -webkit-transition: background-color 0.8s;
       -moz-transition: background-color 0.8s;
       -o-transition: background-color 0.8s;
       -ms-transition: background-color 0.8s;
       transition: background-color 0.8s;
     }
     footer#footer .dt_widget_accordion .panel-body {
       margin-top: 10px;
       border-width: 1px;
       border-style: solid;
       background: none;
     }
     footer#footer .woocommerce.widget_product_search #s {
       border: 1px solid rgba(255, 255, 255, 0.4);
     }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="footer" class="tertier_color_bg ">
  <section class="container footer-section">
    <div class="col-md-12 footer-right equal-height">
      <div id="footer-right">
        <div class="border-left col-md-4 col-sm-6 col-xs-6 col-3" style="display: block; height: 173px;">
          <div class="widget text-3 widget_text">
            <div class="textwidget">
              <p>24 Union Square East
                <br>New York, NY 10003
                <br>646.747.6640
                <br>
                <a href="mailto:info@hospitalityq.com">info@hospitalityq.com</a>
              </p>
            </div>
          </div>
        </div>
        <div class="border-left col-md-4 col-sm-6 col-xs-6 col-3" style="display: block; height: 173px;">
          <div class="widget nav_menu-3 widget_nav_menu">
            <div class="row">
              <div class="col col-sm-12 centered">
                <h3 class="widget-title">Connect</h3>
              </div>
            </div>
            <div class="menu-connect-with-us-container">
              <ul id="menu-connect-with-us" class="menu">
                <li class="logo-desktop hidden-sm hidden-xs">
                  <a href="http://216.213.81.216" style="">
                    <img id="logomenu" src="/wp-content/uploads/2015/03/HQ-Horizontal-Color-Logo-with-TM.png" alt="Hospitality Quotient" class="img-responsive halfsize">
                  </a>
                  <a href="http://216.213.81.216" style="">
                    <img id="logomenureveal" src="/wp-content/uploads/2015/03/HQ-Horizontal-Color-Logo-with-TM.png" alt="Hospitality Quotient" class="img-responsive halfsize">
                  </a>
                </li>
                <li id="menu-item-52" class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a title="follow us on Facebook" href="https://www.facebook.com/HospitalityQ?fref=ts"><i class="icon-facebook-4"></i><span>Facebook</span></a>
                </li>
                <li id="menu-item-53" class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a title="connect with us on LinkedIn" href="https://www.linkedin.com/company/2594533?trk=tyah&amp;trkInfo=clickedVertical%3Acompany%2Cidx%3A2-1-6%2CtarId%3A1436205450081%2Ctas%3Ahospitality%20q"><i class="icon-linkedin"></i><span>LInkedin</span></a>
                </li>
                <li id="menu-item-54" class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a title="follow us on Twitter" href="https://twitter.com/HospitalityQ"><i class="icon-twitter-4"></i><span>Twitter</span></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="border-left col-md-4 col-sm-6 col-xs-6 col-3" style="display: block; height: 173px;">
          <div class="widget hq_nav_menu-2 widget_hq_nav_menu">
            <div class="soma_container">
              <ul id="menu-footer-links" class="some_list">
                <li class="logo-desktop hidden-sm hidden-xs">
                  <a href="http://216.213.81.216" style="">
                    <img id="logomenu" src="/wp-content/uploads/2015/03/HQ-Horizontal-Color-Logo-with-TM.png" alt="Hospitality Quotient" class="img-responsive halfsize">
                  </a>
                  <a href="http://216.213.81.216" style="">
                    <img id="logomenureveal" src="/wp-content/uploads/2015/03/HQ-Horizontal-Color-Logo-with-TM.png" alt="Hospitality Quotient" class="img-responsive halfsize">
                  </a>
                </li>
                <li id="menu-item-774" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-774"><a href="/who-we-are#join_our_team"><span>Join Our Team</span></a>
                </li>
                <li id="menu-item-682" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-682"><a href="https://app.e2ma.net/app2/audience/signup/68724/39157/"><span>Join Our Mailing List</span></a>
                </li>
                <li id="menu-item-709" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-709"><a href="http://216.213.81.216/?page_id=705"><span>Privacy Policy</span></a>
                </li>
              </ul>
            </div>© 2016 Hospitality Quotient</div>
        </div>
      </div>
    </div>
  </section>
</footer>

【问题讨论】：

  • 尝试在页脚元素或页脚中使用`
    `
  • 不...不要。 &lt;center&gt; 已被弃用。
  • 试试margin: 0 auto 0 auto
  • 一个 minimal 演示是 pr0fferred...你有太多的代码在那里...看起来不完整。
  • @Infem401CedupHH 我的朋友，你只是在猜测......请不要。

标签： html css alignment footer


【解决方案1】：

您可以在其中编写大量代码。您能否提供您想要实现的目标的图片？

但是你肯定错过了那里的第一行。

<section class="container">
  <div class="row">
    <div class="col-md-12"></div>
  </div>
</section>

默认情况下会居中。

【讨论】：

    猜你喜欢
    • 2015-12-25
    • 1970-01-01
    • 2012-04-27
    • 2016-08-10
    • 1970-01-01
    • 2016-04-12
    • 1970-01-01
    • 1970-01-01
    • 2010-12-29
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode