how to center a footer div on a webpage
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help? This is my html mark up:
Copyright (c) 2010 mysite.com All rights reserved
9 Answers 9
Center a div horizontally? Typically done by setting margin: 0 auto , or margin-left: auto; margin-right: auto .
And if you want a gap above it, give it a top margin.
Block elements take the entire available width, without specifing it you cannot center them but there inline children with text:align:center;
Hi, could someone please tell me why the footer is working correctly on one page and on another it is appearing mid-way in the web page mixing with data.
You might want to create a separate question for that situation, with enough explanations. You should also consider accepting an answer for this question.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
I’ve used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
(sequence is top, right, bottom, left)
Center text in an HTML footer
I’ve got a footer, and I would like to align the text (phone numbers, address, ect) to all be on the same few lines, and the information to be displayed horizonally. How would I do this with CSS, or will I need to use something else? Here’s my HTML. (Not the   was used to align the phone numbers. And here’s the CSS.
3 Answers 3
use display flex and align-items:center for middle.. remove those br tag
Exactly what I wanted. Thanks! Honestly, not really sure why i though putting the two numbers below each other was a good idea.
You can set the phone and address divs to inline-block then use text-align: center on the footer. Then reset text-align: left on the phone and address divs if you don’t want that text centered.
footer < display: block; background-color: black; position: fixed; bottom: 0; left: 0; right: 0; height: 50px; width: 100%; border-top: 1px solid white; text-align: center; >.phone < color: darkgrey; font-size: 14px; >.address < color: darkgrey; font-size: 14px; >.address, .phone
You can also use display: flex; justify-content: center; on the footer.
The question wasn’t really clear enough abut what should be on what lines, but I do think this is a good answer. That said, OP should make sure they understand what br and actually do and when/why one would apply CSS to individual div’s. I’m not sure OP necessarily even wants to have phone and address in different div objects with different CSS.
@MaxvonHippel yeah, no clue what they’re trying to do with all those ‘s. I’m guessing they are trying to emulate text-align: right on the phone div?
Yea sorry about the wording. My descriptive skills are definitely sub par. But thanks for your suggestions.
How to center content in footer
I am building a website using wordpress theme. I have two elements (one floated left, second floated right) in the footer. I need to make it centered (the second one below the first one) when I resize the browser window. I tried giving the
and tag a class and then style it to float:none; — hovewer you cann check that It didn’t really work on the webpage. I also attach a picture of how I want it to be.. WEBPAGE
© Copyright Hotel Švýcarský Dům
Naleznete nás na sociálních sítích:
3 Answers 3
Here is updated code. with a screen less than 600px, the divs will go on top of each other. This probably will need tweaking to fit on your site.
#left < float: left; >#right < float: right; >#center < text-align: center; >#container < margin-left: 12.5%; margin-right: 12.5%; >.imagefloat < display: block; float: right; margin: -4px 5px 0 5px; >@media (max-width: 600px) < .nofloat < width: 100%!important; text-align: center; float: none!important; >.imagefloat < float: none!important; >> © Copyright Hotel Švýcarský Dům Naleznete nás na sociálních sítích: Ok — I’ve just noticed your html needs restricting for it to work anyway so will update answer with that
Perhaps add align-text:center to one of the divs and a p tag to put the images on a new line
© Copyright Hotel Švýcarský Dům
Naleznete nás na sociálních sítích:
Firstly, you kept your float:left and float:right as inline styling so you will need to move the left and right float to an external css as you can’t override inline styling with just css.
Secondly, Add a separate class for the left and right, say class=»float-left» and class=»float-right» and then use media query to switch properties for the classes like this:
@media (max-width: 768px) < .float-left < float: none; >.float-right < float: none; >> @media (min-width: 769px) < .float-left < float: left; >.float-right < float: right; >> Thirdly, to center the footer text on smaller screens, just add text-align: center to the above media query like this:
@media (max-width: 768px) < .site-info < text-align: center; >.float-left < float: none; >.float-right < float: none; >> Lastly, add the icons and text within a tag so they will line-break accordingly.
Как выровнять элементы на футера по центру
Не получается сделать элементы относительно родительского блока (padding: 16px 100px 16px 75px) и что бы контент был в одну линию.
.footer-boottom, .bot_mnu a < background-color: #a4a4a4; color: #3e3e3e; font-family: 'Karla', sans-serif; font-size: 18px; text-transform: uppercase; line-height: 40px; >.bot_mnu li < border-left: 1px solid #146481; padding-left: 13px; margin-left: 13px; >.fot-social <> .footer-boottom < padding: 16px 100px 16px 75px; >.footer-boottom li < display: inline-block; >.social-bottom
@ codename0082016 (pp.userapi.com/c637926/v637926512/4dfdf/mWsBZ18H3uw.jpg) Как сделать чтобы левый блок был на одном уровне с иконками справа
3 ответа 3
.footer-boottom, .bot_mnu a < background-color: #a4a4a4; color: #3e3e3e; font-family: 'Karla', sans-serif; font-size: 18px; text-transform: uppercase; line-height: 40px; >.bot_mnu < padding: 0; display: inline-block; vertical-align: middle; >.bot_mnu li < border-left: 1px solid #146481; padding-left: 13px; margin-left: 13px; >.fot-social <> .footer-boottom < padding: 16px 100px 16px 75px; >.footer-boottom li < display: inline-block; >.social-bottom < text-align: right; color: #727272; >.copy-r
Добавила .copy-r padding-top .
.footer-boottom, .bot_mnu a < background-color: #a4a4a4; color: #3e3e3e; font-family: 'Karla', sans-serif; font-size: 18px; text-transform: uppercase; line-height: 40px; >.bot_mnu li < border-left: 1px solid #146481; padding-left: 13px; margin-left: 13px; >.fot-social <> .footer-boottom < padding: 16px 100px 16px 75px; >.footer-boottom li < display: inline-block; >.social-bottom
Достаточно добавить следующий код:
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Centering Footer With CSS/HTML
I have a problem centering the copyright footer on my website. I have two icons on the left (Facebook and Twitter), but if I add another for MySpace, it goes off. How can I fix this? Can it be indefinitely centered so I won’t have to change it every time? Thanks. TEMPLATE:
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
#footer < margin: 0px auto; padding-bottom: 60px; width: 850px; >#footer .social < float: left; >#footer .social ul < list-style: none; margin: 10px 0px 0px; padding: 0px; >#footer .social li < float: left; margin-right: 5px; >#footer .social img < border: 0px; >#footer .copyright < color: #fff; float: left; line-height: 32px; margin-left: 200px; margin-top: 10px; text-align: center; >#footer .resize
do you want the text centered in the whole of footer width, or centered in the space that’s left after adding the images?
5 Answers 5
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
#footer < margin: 0px auto; width: 850px; >#footer .social < padding: 30px 0; width: 425px; text-align: center; >#footer .copyright
By floating your copyright and not specifying a width, your «text-align:center;» rule has little effect. A floated element without a defined width shrinks to fit its content. What is giving you your perceived sense of center is your «margin-left:200px;» rule. It is pushing your copyright to the right of the bookmarks by 200px.
Centered in footer
#footer < position:relative; width:850px; >/* position children relative to parent */ #footer .social < position:absolute; left:0; top:0 >/* take the bookmarks out of the flow and position in upper left corner of the footer */ #footer .copyright < text-align:center; >/* since bookmarks are out of normal flow, this div stretches entire length, so all you have to do is center it */ Centered in space to right of bookmarks
#footer .social < float:left; width:200px; >/* give a specific width and float left */ #footer .copyright < float:left; width:650px; text-align:center; >/* center in remaining space */