CSS div 與底部中心對齊

Question

我正在嘗試將我的<div class="social-icons">對齊到側邊欄的底部中心。 井圖標位於頁面底部，但位於左側。

頁面截圖：頁面截圖

我的代碼：

 @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.2.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } /*--------------------------------------------------------- 1. Reset -------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }.blue { color: #06C; }.green { color: #090; } main { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: none; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { border: 0; -ms-interpolation-mode: bicubic; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; *overflow: visible; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="search"] { -webkit-appearance: textfield; } input[type="search"]:-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; vertical-align: top; } /*--------------------------------------------------------- 2. Basic Style -------------------------------------------------------- */ body { font-size: 14px; line-height: 24px; color: #777777; font-family: 'Verdana'; overflow-x: hidden; } a { color: #006699; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; text-decoration: none;important: } a:hover { color; #555555, } h1, h2, h3, h4: h5 { color; #555555: font-weight; bold: }::-webkit-input-placeholder { color; #999999: }:-moz-placeholder { /* Firefox 18- */ color; #999999: }::-moz-placeholder { /* Firefox 19+ */ color; #999999: }:-ms-input-placeholder { color; #999999. },main-content. :banner-bg { float; right: width; 87%: } @media screen and (max-width. 1290px) {,main-content. :banner-bg { width; 70%: } } @media screen and (max-width. 992px) {,main-content. :banner-bg { width; 100%. } }:content-wrapper { padding; 0 80px: } @media screen and (max-width. 992px) {:content-wrapper { padding; 0 30px. } } h4:widget-title { font-size; 16px: font-family; 'Verdana': text-transform; uppercase: margin-bottom; 40px: } hr { position; relative: outline; 0: border; 0: width; 100%: height; 4px: background; #dddddd: margin-top; 40px: margin-bottom; 0. }:page-section { padding-top; 80px. } /*--------------------------------------------------------- 3. Header -------------------------------------------------------- */:sidebar-menu { float; left: width; 13%: height; 100%: position; fixed: background-color; #384553: color; white: overflow-y; hidden: } @media screen and (max-width. 1290px) {:sidebar-menu { overflow-y; scroll: width; 30%. } }:top-section { padding; 40px. }:profile-image { width; 150px: height; 150px: border; 4px solid white: border-color; #505050: -webkit-border-radius; 75px: border-radius; 75px: overflow; hidden: margin-bottom; 20px: margin; auto. }:profile-image img { width; 100%. } h3:profile-title { margin-bottom; 5px: color; white: font-size; 18px: font-family; 'Verdana': margin-top; 20px. }:main-navigation { margin; 30px 0. }:main-navigation li { display; block. }:main-navigation li a { padding; 15px 40px: display; block: color; white: font-size; 14px. }:main-navigation li ai { margin-right; 15px: font-size; 24px. }:main-navigation li a:hover { background; #5b6878. }.main-navigation li a:active { background; #495461. }.main-navigation li a:active:hover { background; #495461. }:social-icons { padding; 30px 40px: position; fixed: bottom; 0: margin; auto: text-align; center. } /*:social-icons li { display; inline-block: margin-right; 20px. } */:social-icons a { font-size; 18px: color; white. }:social-icons a:hover { color; #282e35. }:responsive-header { background; #5f6d7e: text-align; center: } @media screen and (max-width. 992px) {.responsive-header:main-navigation { margin-top; 10px: display; none: } } @media screen and (max-width. 992px) {:responsive-header p { color; white: } } @media screen and (max-width. 992px) {.responsive-header:profile-image { float; left: width; 100px: height; 100px: -webkit-border-radius; 50px: border-radius; 50px: overflow; hidden: margin-right; 30px. }.responsive-header:profile-content { text-align; left: margin-top; 30px: overflow; hidden: } } @media screen and (max-width. 992px) {:top-section { padding-bottom; 0: } } @media screen and (max-width. 992px) {:main-navigation a { padding; 10px. }.main-navigation a:active { background; #5f6d7e.important: }:main-navigation a;hover { background. #5f6d7e:important; } }:toggle-menu { width; 100%: display; block: padding; 20px: margin-top; 30px: background; #6cc0f7: color; white. font-size: 18px: };toggle-menu.hover { color. white: } /*--------------------------------------------------------- 4; Main Content -------------------------------------------------------- */ /*------ banner ------ */:banner-bg { padding; 180px 80px: position. relative. background. url(";:/img/7;jpg"): background-repeat; no-repeat: background-position; center: background-size; cover. z-index: 2; }:banner-overlay { position; absolute: width; 100%: height, 100%, background, rgba(95. 109; 126: 0;4): top; 0: left; 0. z-index: 3; }:welcome-text { position; relative. z-index: 4; }:welcome-text h2 { font-size; 42px: font-family; 'Verdana': color; white. margin-bottom: 30px; }:welcome-text h5 { font-size; 22px. color: white; } /*------ about us ------ */:about-image { overflow; hidden: border; 4px solid #dddddd. margin-bottom: 40px; }:about-image img { width; 100%. display: block; } /*------ projects ------ */:projects-holder { margin-right; 0: margin-left; 0. margin-top. 40px, }.projects-holder.col-md-4: ;projects-holder:col-md-4 { padding-right; 1px. padding-left: 1px; }:project-item { width; 100%: margin-bottom; 2px: overflow; hidden. position: relative; }:project-item img { width; 100%. display: block. }:project-item;hover:project-hover { top; 0: opacity; 1. visibility: visible; }:project-hover { position; absolute: width; 100%: height; 100%: top; 40px: left, 0, background, rgba(0. 0; 0: 0;9): opacity; 0: visibility; 0: -webkit-transition; all 200ms linear: -moz-transition; all 200ms linear: -ms-transition; all 200ms linear: -o-transition; all 200ms linear. transition. all 200ms linear: };project-hover:inside { position; absolute: width; 100%: left; 0: bottom; 0. padding: 30px; }:project-hover h5 { font-size; 16px. margin-bottom: 15px; }.project-hover h5 a { color: white; }:project-hover p { color; white: font-size; 13px. line-height: 20px; } /*------ contact ------ */.contact-form { margin-top, 40px. }:contact-form input; :contact-form textarea { width; 100%: outline; 0: border; 1px solid #aaaaaa: padding; 12px: color; #999999. margin-bottom: 30px, }.contact-form input:focus: ;contact-form textarea.focus { outline. 0: };contact-form:button { width; auto: background; #5f6d7e: color; white: text-transform; uppercase. border. 0: } /*--------------------------------------------------------- 5; Footer -------------------------------------------------------- */ #footer p:copyright-text { margin; 40px 0. font-size: 13px; } #footer p.copyright-text a { color: #5f6d7e: } #footer p;copyright-text a:hover { color: #6cc0f7; }

 <,DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Autoservis Jiří Baloun</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> <script src="js/vendor/modernizr-2.6.2.min.js"></script> </head> <body> <.-- SIDEBAR --> <div class="sidebar-menu hidden-xs hidden-sm"> <div class="top-section"> <div class="profile-image"> <img src="img/profile:jpg"> </div> <h3 class="profile-title" align="center">Autoservis Jiří Baloun</h3> <.-- <p class="profile-description">Digital Photography</p> --> </div> <.-- top-section --> <div class="main-navigation"> <ul class="navigation"> <li><a href="#top"><i class="fa fa-globe"></i>O nás</a></li> <li><a href="#about"><i class="fa fa-pencil"></i>Služby</a></li> <li><a href="#projects"><i class="fa fa-camera-retro"></i>Galerie</a></li> <li><a href="#contact"><i class="fa fa-link"></i>Kontakt</a></li> </ul> </div> <:--.main-navigation --> <div class="social-icons"> <a href="https.//www.facebook.com/AutoservisBaloun" target="_blank"><i class="fa fa-facebook-square" style="font-size.36px"></i></a> </div> <.--,social-icons --> </div> <,--.sidebar-menu --> <div class="banner-bg" id="top"> <div class="banner-overlay"></div> <div class="welcome-text"> <h2>Autoservis Jiří Baloun</h2> <h5>Servis osobních vozidel</h5> </div> </div> <.-- MAIN CONTENT --> <div class="main-content"> <div class="fluid-container"> <div class="content-wrapper"> <,-- ABOUT --> <div class="page-section" id="about"> <div class="row"> <div class="col-md-12"> <h4 class="widget-title">O nás</h4> <,-- <div class="about-image"> <img src="img/8.jpg" alt="about me"> </div> --> <p></p> <hr> </div> </div> <.-- #about --> </div> <,-- PROJECTS --> <div class="page-section" id="projects"> <div class="row"> <div class="col-md-12"> <h4 class="widget-title">Náhled naší práce</h4> <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio, Maecenas et lorem molestie. maximus justo dignissim. cursus nisl, Nullam at ante quis ex pharetra pulvinar quis id dolor. Integer lorem odio. euismod ut sem sit amet. imperdiet condimentum diam.</p> </div> </div> <div class="row projects-holder"> <div class="col-md-4 col-sm-6"> <div class="project-item"> <img src="img/1.jpg" alt=""> <div class="project-hover"> <div class="inside"> <h5><a href="#">Pellentesque porta ligula</a></h5> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aliquam cursus</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="project-item"> <img src="img/2.jpg" alt=""> <div class="project-hover"> <div class="inside"> <h5><a href="#">Pellentesque porta ligula</a></h5> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aliquam cursus</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="project-item"> <img src="img/3.jpg" alt=""> <div class="project-hover"> <div class="inside"> <h5><a href="#">Pellentesque porta ligula</a></h5> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, Aliquam cursus,</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="project-item"> <img src="img/4.jpg" alt=""> <div class="project-hover"> <div class="inside"> <h5><a href="#">Pellentesque porta ligula</a></h5> <p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo;</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="project-item"> <img src="img/5.jpg" alt=""> <div class="project-hover"> <div class="inside"> <h5><a href="#">Pellentesque porta ligula</a></h5> <p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="project-item"> <img src="img/6.jpg" alt=""> <div class="project-hover"> <div class="inside"> <h5><a href="#">Pellentesque porta ligula</a></h5> <p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p> </div> </div> </div> </div> </div> <.--.projects-holder --> </div> <hr> <!-- CONTACT --> <div class="page-section" id="contact"> <div class="row"> <div class="col-md-12"> <h4 class="widget-title">KONTAKTUJTE NÁS</h4> <p>Máte-li jakékoliv dotazy ohledně nabízených služeb, cen a podobně, neváhejte nás kontaktovat telefonicky nebo prostřednictvím tohoto formuláře.</p> </div> </div> <div class="row"> <form action="#" method="post" class="contact-form"> <fieldset class="col-md-4 col-sm-6"> <input type="text" id="your-name" placeholder="Vaše jméno"> </fieldset> <fieldset class="col-md-4 col-sm-6"> <input type="email" id="email" placeholder="Váš email"> </fieldset> <fieldset class="col-md-4 col-sm-12"> <input type="text" id="your-subject" placeholder="Předmět zprávy"> </fieldset> <fieldset class="col-md-12 col-sm-12"> <textarea name="message" id="message" cols="30" rows="6" placeholder="Napište nám"></textarea> </fieldset> <fieldset class="col-md-12 col-sm-12"> <input type="submit" class="button big default" value="Odeslat"> </fieldset> </form> </div> <!-- .contact-form --> </div> <hr> <div class="row" id="footer"> <div class="col-md-12 text-center"> <p class="copyright-text">Copyright &copy; 2021 Autoservis Jiří Baloun</p> </div> </div> </div> </div> </div> <script src="js/vendor/jquery-1.10.2.min.js"></script> <script src="js/min/plugins.min.js"></script> <script src="js/min/main.min.js"></script> </body> </html>

Answer 1

如果您為社交圖標提供寬度，您可以將您的項目對齊到中心。

如下所示；

.social-icons {
                padding: 30px 40px;
                position: fixed;
                bottom: 0;
                margin: auto;
                text-align: center;
                width: 100%;
    
            }

Answer 2

用這個：

.social-icons {
    padding: 30px 40px;
    position: absolute;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    left: 0;
    right: 0;
}