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">
<Hello>
</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.
Related
Code pasted below. I'm trying to get the two castle images to stick to the bottom of the page, specifically the bottom of their container div. I tried using display:flex on the image container div, with align-items: baseline, but it didn't do anything. I tried playing around with various justify and align values, as well as position:relative and absolute, but that just gave a lot of unexpected (to me, at least) results e.g. one of the two images disappearing off-screen.
Any suggestions for fixes greatly appreciated!
Cheers
#import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=MedievalSharp&family=Roboto+Condensed:wght#300&display=swap');
body {
margin: 0 auto;
background-color: #1D1D1D;
cursor: url('snake-moving.png'), pointer;
font-family: 'MedievalSharp', cursive;
}
header nav {
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20 px;
height: 88px;
width: auto;
border-style: double;
border-top: 15px;
border-color: white;
}
header nav * {
font-size: 30px;
color:antiquewhite;
text-decoration: none;
font-weight: 800;
}
header nav form, a::after {
content: url('pie-logo.png');
position: relative;
top: 10px;
left: 20px;
}
.game {
border: #1D1D1D solid 40px;
width: auto;
background-color: #F4F186;
}
.image-container {
width: auto;
height: 800px;
margin: 0 auto;
position: relative;
}
.image-container img {
position: absolute;
bottom: 0;
}
.game h1 {
color: midnightblue;
}
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.
Just like the title says, I'm trying to create a rough layout for a website and I want to not only center the words on each side like they already are, but also have them in the middle. When I use transform and put the words in the middle of the page, the h1 element doesn't move but then the p element keeps going down the page rather than adjusting it with every new row. Any tips?
<div class="left-side" >
<h1>Welcome.</h1>
<p>I want to welcome you!</p>
</div>
<div class="right-side">
<h1>Corey Michaud.</h1>
<p>Corey is my name :)</p>
</div>
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
body {
text-align: center;
overflow: hidden;
font-family: 'Rubik', sans-serif;
}
.left-side {
background: white;
width: 50%;
height: 100%;
left: 0;
color: black;
position: absolute;
}
.right-side {
background: black;
width: 50%;
height: 100%;
right: 0;
color: white;
position: absolute;
}
h1 {
font-size: 72px;
font-weight: 700;
}
p {
font-size: 48px;
font-weight: 300;
}
You want to use css flexbox. Add
.left-side, .right-side{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
Hopefully this is helpful!
I have an h1 inside a nav that is currently centering based on the width of the h1. How would I use text-align so that the title is centered based on the width of the nav?
Here is my HTML and CSS:
* {
margin: 0;
padding: 0;
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: 100%;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Thank you in advance for your help!
You can set your nav to have a position of relative which means that any inside absolute element will be within the bounds of this element. Then set the h1 to have a position of absolute this will remove the element from the normal flow of the page and have it flow with the parent element with the position of relative. From there you can center it using margin: 15px auto;, left: 0 and right: 0 this will make the h1 element 100% width of the nav thus centering it correctly.
* {
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
margin: 0;
padding: 0;
}
h1 a {
color: inherit;
text-decoration: none;
}
.logo {
height: 100%;
}
nav {
background-color: black;
display: flex;
height: 90px;
position: relative;
width: 100%;
}
nav h1 {
color: white;
flex: 1 0 auto;
font-size: 44px;
left: 0;
line-height: 55px;
margin: 15px auto;
position: absolute;
right: 0;
text-align: center;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Now this method also has its fallback, you will lose the ability to click on the logo, but this can be remedied by setting a position of relative and z-index: 2 so the logo element will be higher up than the h1 making it clickable.
Flexbox is perfect approach, and you were nearly there.
I added an empty div with class .ghost to act as a counter balance to the logo. Since I know the logo is 90px wide I set the ghost div to the same, and both the ghost div and the logo get similar flex settings:
.logo {
height: auto;
width: 90px;
flex: 0 0 90px; // same
}
.ghost {
width: 90px;
flex: 0 0 90px; // same
}
Now, with the <h1> allowed to grow (flex: 1 0 auto), it will take up all the rest of the space naturally and remain perfectly centered thanks to the ghost div flanking the right side.
* {
margin: 0;
padding: 0;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: auto;
width: 90px;
flex: 0 0 90px;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
.ghost {
width: 90px;
flex: 0 0 90px;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1>The Novel Column</h1>
<div class="ghost"><!-- nothing here --></div>
</nav>
Have a div (really a header element) and I've seen many sites these days display text content perfectly centered within the container. So I'm trying it out, but so far, it's too far to the top of the div than the center. The example is here: http://jsfiddle.net/nuoxpmrk/
HTML:
<header class="entry-header" style="background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
<section class="entry-caption">
<h1 class="entry-title">Title Goes Here</h1><p class="entry-subtitle">This is a Subtitle</p> <p class="entry-credits">Written by: JS Fiddle</p>
</section>
</header>
CSS:
.entry-header { position: relative; width: 100%; height: 640px; color: #FFF; }
.entry-caption { margin: 15% auto 0; padding: 32px; text-align: center; width: 100%; }
.entry-caption p.entry-subtitle { font-size: 18px; line-height: 1.25; text-transform: none; }
.entry-caption h1.entry-title { font-size: 38px; line-height: 1.25; }
.entry-caption p.entry-credits { font-size: 14px; line-height: 1; margin-bottom: 1em; text-transform: uppercase; }
Your margin: 15% auto 0; is what is making it top. You need to wrap everything inside a <div> and give the following styles to this:
.entry-header {
position: relative;
width: 100%;
height: 640px;
color: #FFF;
}
.entry-caption {
padding: 32px;
text-align: center;
width: 100%;
}
.entry-caption p.entry-subtitle {
font-size: 18px;
line-height: 1.25;
text-transform: none;
}
.entry-caption h1.entry-title {
font-size: 38px;
line-height: 1.25;
}
.entry-caption p.entry-credits {
font-size: 14px;
line-height: 1;
margin-bottom: 1em;
text-transform: uppercase;
}
.center {
width: 100%;
height: 180px;
position: absolute;
top: 50%;
left: 0;
margin-top: -90px;
overflow: hidden;
}
<header class="entry-header" style="background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
<section class="entry-caption">
<div class="center">
<h1 class="entry-title">Title Goes Here</h1>
<p class="entry-subtitle">This is a Subtitle</p>
<p class="entry-credits">Written by: JS Fiddle</p>
</div>
</section>
</header>
You can keep this very simple with CSS Flexbox. You just need to add three lines of code, and you can get rid of a bunch of code, as well.
Regardless of screen re-sizing vertically or horizontally, the centered items will remain centered.
HTML (no changes)
CSS
.entry-header {
display: flex; /* establish flex container */
justify-content: center; /* center child element (<section>) horizontally */
align-items: center; /* center child element (<section>) vertically */
/* No further changes */
position: relative;
width: 100%;
height: 640px;
color: #FFF;
}
.entry-caption {
/* margin: 15% auto 0; don't need this */
/* padding: 32px; don't need this */
text-align: center;
/* width: 100%; don't need this */
}
DEMO: http://jsfiddle.net/nuoxpmrk/2/
Note that flexbox is supported by all major browsers, except IE < 10.