2016-04-21 8 views
0

Ich habe einen Fuß mit 3 Spalten. Ich versuche den Inhalt im Hauptteil der Site zu zentrieren. Im Moment sitzt der gesamte Inhalt linksbündig innerhalb der jeweiligen Divs. Ich habe Probleme, den Inhalt zu zentrieren, ohne den Text zu zentrieren.Schwierigkeiten bei der Zentrierung von Elementen in der Fußzeile

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:[email protected]">[email protected]</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>

+0

versuchen, '

' in den Fußzeilenelementen oder in der Fußzeile zu verwenden –

+2

Nein ... nicht. '

' ist veraltet. –

+0

versuche 'margin: 0 auto 0 auto' –

Antwort

0

Sie haben Art und Weise, dort zu viel Code. Kannst du vielleicht ein Bild von dem machen, was du erreichen willst?

Aber Sie fehlen erste Zeile dort, das ist sicher.

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

, dass es von Standard-Zentrum werden.

Verwandte Themen