如何解决CSS div 对齐到底部中心
我正在尝试将我的 <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,section {
display: block;
}
audio,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,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 a i {
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.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 © 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>
解决方法
如果您为社交图标提供宽度,您可以将您的项目居中对齐。
如下所示;
.social-icons {
padding: 30px 40px;
position: fixed;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
}
,
使用这个:
.social-icons {
padding: 30px 40px;
position: absolute;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
left: 0;
right: 0;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。