How to align text at the center of a footer in CSS? - html

I have a domain in which I have made a page in HTML, CSS and Bootstrap 3.
If we scroll down at the footer, we can the text Footer is not in the center as shown below in the image (screenshot of the footer from the domain). Its little bit up.
I am wondering what changes I need to make in the existing CSS codes so that the text Footer exactly comes at the center.
The CSS codes which I have used in the footer section is:
/**** Footer START ****/
.footer {
width: 100%;
height: 12%;
background-color: black;
display: flex;
align-items: center;
background-size: 100% 100%;
justify-content: center;
}
.footer p {
color: white;
font-size: 2.25em;
}
/**** Footer FINISH ****/
I have used the same CSS codes for the Header and its working perfectly as shown below in the design:
I do agree that in the actual snippets and in the fiddle as well, its working quite fine but I am not sure why its not working in the actual domain.

I do not understand but if you want from top to bottom in the middle:
footer{
text-align: center;
background: black;
color:white;
font-size: 1em;
width: 100%;
height: 40px;
overflow: hidden;
}
footer>p{
margin-top: calc(20px - 0.5em);
height: auto;
}
<footer>
<p>Text</p>
</footer>

Try this snippet, it's working.
If you want vertically middle also, then try to give line-height in container that matches with height.
.footer {
width: 100%;
height: 50px;
line-height: 50px;
background-color: black;
text-align: center;
background-size: 100% 100%;
justify-content: center;
}
.footer p {
color: white;
font-size: 1.25em;
}
<div class="footer">
<p>Footer</p>
</div>

It looks like it worked...
.footer {
width: 100%;
height: 12%;
background-color: black;
display: flex;
align-items: center;
background-size: 100% 100%;
justify-content: center;
vertical-align: middle;
}
.footer p {
color: white;
font-size: 1.25em;
}
<div class="footer">
<p>Footer</p>
</div>

Related

How do I adapt the <main> height to the page when I zoom in and out?

I am learning HTML and CSS and I am trying to replicate the homepage of flickr.com.
I can't get the central part of my page ("Find your inspiration") to stay centered when I zoom in and out. I can't get the <body> content to responsively fill the space between the <header> and the <footer>.
I have spent many hours googling, playing with heights, flex, and trying to reshape the layout of my page, but I can't figure out how to reproduce the desired effect. I think I am messing up the layout (especially with the nesting of my containers) but I can't spot my mistake.
Here are the screenshots of the real flickr.com home page and the screenshot of the clone page I'm trying to build. As you can see, my page doesn't keep the element centered when I zoom out because my block doesn't stretch to fill the space between <header> and <footer>:
My clone home page
Original Flickr home page
html {
background: url(images/8225606733_086c8f3d83_o.jpg)no- repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
header {
min-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px;
}
main {
min-height: 400px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: block;
text-align: center;
background-color: lightblue;
font-family: Arial, Helvetica, sans-serif;
padding: 0 30px;
}
.wrapper h1 {
font-size: 40px;
font-weight: bold;
margin-bottom: 18px;
}
.wrapper h2 {
font-size: 25px;
font-weight: normal;
margin-bottom: 50px;
}
.wrapper a {
color: black;
font-weight: bold;
background-color: white;
padding: 12px 23px;
border-radius: 3px;
}
footer {
position: fixed;
width: 100%;
bottom: 0px;
}
<header>
HEADER
</header>
<main>
<div class="wrapper">
<h1>Find your inspiration.</h1>
<h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.
</h2>
<div class="start-button">
Start for free
</div>
</div>
</main>
<footer>
FOOTER
</footer>
try this way:
main {
height: calc(100vh - 70px);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
You can't center the .wrapper element because you assigned a min-height: 400px to its parent element so it doesn't span for the entire viewport height. Try adding a colored background to the main element and you'll see.

Why floating div starts at the header section

My content div that overlaps the header div in my CSS code as per the attached image. Both the content and side-nav divs should be below the header section.
I tried changing the value of position property for the elements but it doesn't work. I also tried introducing top property to the content section to be as same as the side nav but it didn't work too
body {
font-family: "Lato", sans-serif;
font-size: 1.6rem;
line-height: 1.7;
font-weight: 400;
color: #777;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: orangered;
margin: 0;
max-width: 100%;
width: 100%;
}
#media only screen and (max-width: 75em) {
.container {
margin: 0;
max-width: 100%;
width: 100%;
}
}
.header {
font-size: 1.4rem;
height: 8vh;
background-color: #3394e3;
border-bottom: var(--line);
top: 0px;
position: fixed;
width: 100%;
/*
display: flex;
justify-content: space-between;
align-items: center;*/
}
.side-nav {
position: fixed;
margin: 0px auto;
height: 100%;
float: left;
top: 8vh;
clear: both;
background-color: #fff;
bottom: 0;
}
.content {
background-color: #f4f4f4;
min-height: 93vh;
width: 85%;
float: right;
}
.footer {
background-color: green;
height: 7vh;
width: 85%;
float: right;
color: red;
}
<div class="container">
<div class="header-fixed">
<header class="header">
</header>
</div>
<nav class="side-nav">
</nav>
<main class="content">
</main>
<footer class="footer">Footer</footer>
</div>
Your .header has a position:fixed which takes it out of the normal flow of a webpage. So since it is taken out (essentially placed on a different layer of the page flow), your content is relatively positioned in the normal flow. As the .header is taken out of the flow, the .content is technically the first item in the flow of the page now.
So you will just need to give the .content a margin-top that is equivalent to the height of your .header.
Your .sidebar also has a position:fixed, so it's on a different layer, so it doesn't care about where it is placed in relation to the .header. So that's why you had to manually position it and give it a top:8vh to put it 8vh down from the top of the window.

How to stack two header tags instead of side by side

The current header tags are side by side and I'm trying to get the second header tag to sit underneath the first.
I currently have h1 and h2 tags. I have tried putting it all into an h1 tag and using span, however, the styling on span does not take well when sizing and aligning. I am trying to have it centered on the screen and have the subtitle directly underneath of the title, centered by the middle, not left aligned and next to it.
header {
width: 100%;
height: 100vh;
background-image: url("underneath.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.wrapper {
padding-top: 15%;
color: rgb(240, 240, 240);
display: flex;
align-items: center;
justify-content: center;
}
.name {
font-size: 6em;
display: inline;
}
.subtitle {
display: inline;
}
<header>
<div class="wrapper">
<h1 class="name">Answer 42</h1>
<h2 class="subtitle">Customer Acquistions</h2>
</div>
</header>
I am trying to create a title for the page with a subtitle underneath of it and have it centered above a background image I put in CSS. My current code has the the header tags side by side.
I hope this simple solution will help you.
header {
width: 100%;
height: 100vh;
background-image: url("underneath.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.wrapper {
padding-top: 15%;
color: rgb(240, 240, 240);
}
.name {
font-size: 6em;
margin-bottom: 0;
line-height: 1em;
text-align: center;
}
.subtitle {
text-align: center;
margin-top: 0;
}
<header>
<div class="wrapper">
<h1 class="name">Answer 42</h1>
<h2 class="subtitle">Customer Acquistions</h2>
</div>
</header>

Centering text is messing up my header

I want to center text in my header, the header takes up 100% of the view height and 100% of the width and does only consist of a solid color. When i center the text (Hello) the header is "pushed" down leaving white space and i have no clue how to fix this.
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
}
#body {
margin: 0;
}
<header id="mainHeader">
<p id="hello">
&ltHello&gt
</p>
</header>
(The text needs to be centered vertically when window is zoomed by default)
I made a jsfiddle and I saw the white box above the header. I added a margin-top: 0 to the css at #hello and it seems to work for me. Test it out!
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
margin-top: 0;
}
#body {
margin: 0;
}
EDIT:
To fix what he wanted to do I used the flex-property to allign the items in the middle of the header like this:
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
display: flex;
justify-content: center; (vertical center)
align-items: center; (horizontal center)
}
Maybe you can play with the padding-top property! Of course, I've deleted the margin top that the <p> adds by default...
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
padding-top: 100px;
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin: 0 auto;
text-align: center;
}
#body {
margin: 0;
}
The white space has nothing to do with centring text. That is the combination of the default margin-top that applies to paragraphs and collapsing margins.
Add margin-top: 0 to the rules for #hello.

Position 3 div boxes side-by-side below a wider single div

I'm trying to get 3 divs to all be side by side below another div (that contains a h1 and a piece of small text below it). I'm having some trouble doing it.
What I am aiming for is something like this:
I've tried to put a div (that encompasses the 3 other divs) below the main title div.
I've tried this CSS:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
}
Here is a JSFiddle of what I've got so far: http://jsfiddle.net/4zx9gxgL/
Any suggestions/ideas?
You can use display:table-row and display:table-cell to make it work similar to a table.
For example:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
display: table-row;
}
.content-info div {
width:300px;
padding:25px;
margin: 25px;
display: table-cell;
}
And you can remove the .one{}, .two{}, .three{} in your css
There are several ways to go about this. CSS table, float and position offer three possible solutions. Depending on your overall objectives, here's a solution featuring inline-block (no table, no float, no position). This solution is very simple, stable, responsive, and easy-to-customize.
DEMO: http://jsfiddle.net/nayztL4y/2/
HTML
<div class="container">
<h1>H1 Header</h1>
</div>
<div class="container">
<div class="boxes"><h2>Box 1</h2></div>
<div class="boxes"><h2>Box 2</h2></div>
<div class="boxes"><h2>Box 3</h2></div>
</div>
CSS
.container {
width: 90%;
height: 200px;
border: 1px solid black;
margin-bottom: 10px;
text-align: center;
background-color: #ff0;
}
.boxes {
width: 25%;
height: 180px;
border: 2px dashed red;
margin: 8px 10px;
display: inline-block;
}
UPDATE
I've updated your fiddle demo, as well.
http://jsfiddle.net/4zx9gxgL/33/
so you want to put all thre divs side by side. i think it's that .
.main-content {
text-align: center;
font-family:'Montserrat', sans-serif;
position: relative;
}
.content-info {
position: relative;
width: 100%;
height: 110px;
top: 0px;
}
.yo{
display: inline-block;
width: 33%;
margin-right: -2px;
text-align:center;
}
https://jsfiddle.net/4zx9gxgL/30/
I had a go aswell ...
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
background: url("http://pre15.deviantart.net/52ce/th/pre/i/2011/174/b/c/candy_blur_abstract_hd_by_ivereor-d3jsglw.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
.yx {
text-align: center;
}
.main-content {
text-align: center;
font-family: 'Montserrat', sans-serif;
display: block;
position: relative;
top: 20%;
left: 50%;
margin-top: 100px;
height: auto;
margin-bottom: -100px;
/* bring your own prefixes*/
transform: translate(-50%, -50%);
}
.main-content h1 {
font-size: 62px;
}
.main-content h2 {
font-size: 32px;
}
.content-info {
text-align: center;
font-family: 'Montserrat', sans-serif;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.content-info div {
width: 300px;
padding: 25px;
margin: 25px;
}
.one {
display: inline-block;
max-width: 33%;
}
.two {
display: inline-block;
max-width: 33%;
}
.three {
display: inline-block;
max-width: 33%;
}
<body>
<div class="main-content yx">
<h1>Name Here</h1>
<h2>Hi, I'm Name.</h2>
</div>
<div class="content-info">
<div class="one">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="two">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="three">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
</div>
<footer></footer>
</body>
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
float:left;
width:100%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
float:left;
}
If the 3 bottom divs don't align correctly remove the margin settings, or adjust accordingly.