CSS div 底部居中对齐
CSS div align to bottom center
我正在尝试将 <div class="social-icons"> 对齐到边栏的底部中心。
井图标在页面底部，但在左侧。
页面截图：Page screenshot
我的代码：
@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 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, 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;
}
我正在尝试将 <div class="social-icons"> 对齐到边栏的底部中心。
井图标在页面底部，但在左侧。
页面截图：Page screenshot
我的代码：
@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 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, 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;
}