I want to align some elements to the center of my screen, while leaving others where they are? im pretty new to html and ive tried googling it so if anyone can help it would be appreciated. Here is the code.
*{
box-sizing: border-box;
margin:0;
padding:0;
font-weight: 300;
font-size: 13px;
text-align: center;
}
body{
background-image: none;
background-size: cover;
background-position:center center;
height:100vh;
}
a{
text-decoration:none;
}
header{
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display: -o-flex;
display:flex;
justify-content: center;
align-items: center;
padding:30px 70px;
}
.nav-area{
list-style: none;
}
.nav-area li{
display:inline-block;
padding:0 15px;
text-transform: uppercase;
}
.nav-area li a{
transition: .3s;
color:#000000;
}
.nav-area li a:hover{
color:#000000;
}
.btn-area{
cursor:pointer;
color:rgb(0, 0, 0);
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
padding:10px 30px;
border-radius: 5px;
background:#ffffff;
}
Here my elements fit to the left and right of the screen. I want some to fit in the center while leaving others where they are
You can use position property to center a item and use absolute ,top : 50% , left: 50% to center item with respect to parent element.
As you've not included your html code, I hope the elements that you need to keep centered are adjacent to one another. If so, you can group them by using a <div></div> element and then apply css to that <div></div>. Following is code example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button>button1</button> //other elements
<button>button2</button>
<div class="sample">
<button>button3</button> //elements you want to center
<button>button4</button>
<button>button5</button>
</div>
<button>button6</button> //other elements
<button>button7</button>
</body>
Here is the sample css code
.sample{
display: flex;
flex-direction: column;
align-items: center;
}
Note that the above code center the content horizontally. You can center it vertically by giving a separate height to the div as you want (because in default the div takes the height of the content!) and using the justify-content: center; css property to center it vertically within the div. Hope you find this answer useful!
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I want to create a simple navbar and I want it centered. It works, but when I add an image above the ul, the list is not centered anymore and I don't know why. I centered the header element with justify-content center.
To center the logo, I changed the margin left and right to auto and put a width of 20% on it. It looks like something is wrong with the image but I'm not sure.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: "Montserrat",sans-serif;
font-weight: 500;
}
header{
display: flex;
padding: 25px 10%;
justify-content: center;
}
.logo{
display: block;
margin: 0 auto;
width: 20%;
}
.nav__links li{
display:inline;
padding: 0 15px;
}
.nav__links li a{
color:#000000;
text-decoration: none;
transition: 0.3s;
}
.nav__links li a:hover{
color: rgb(0, 0, 0,0.8);
}
<!DOCTYPE html>
<head>
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png"
alt="google">
<ul class="nav__links">
<li>Plan your visit</li>
<li>Exhibitions and events</li>
<li>Art and artists</li>
<li>Store</li>
</ul>
</nav>
</header>
</body>
</html>
you can solve the centering problem by adding this. if you want the A tags to appear in the middle, you need to apply display flex specifically to the UL tag. So you can change whatever direction you want to change.
ul{
display: flex;
justify-content: center;
}
header{
display: flex;
padding: 25px 10%;
justify-content: center; // and I added this because you want it right in the middle of the page.
}
|header // if you give a d-flex it only affects the same level of item, so only nav is affected
|nav // if you give a d-flex it only affects the same level of item, so img and ul is affected
|img
|ul // if you give a d-flex it only affects the same level of item, so elements within the li tag are affected.
|li
The current issue I have is when I resize my browser window, bigger especially, the images I've added in disappear off the screen, or overlap with the text above it.
I've tried aligning it differently, but again, I find that either it's not worked, or it'll disappear off the page. Potentially because my text and my image aren't talking to one another, and are just sitting on the page together, but I'm not sure how to fix this so any suggestions and help would be greatly appreciated.
Also had a little trouble resizing my button, I've tried targeting the height/width in both HTML and CSS, but it doesn't seem to make a difference.
Current issue: the button's disappeared off the page completely, and the image has overlapped the text.
Current Issue
Expected outcome: Ideally would look something like below, but button would be smaller, higher etc. Text would ideally be more bulky in a paragraph, so it's not just 1 line that runs across the entire page, but maybe 3 or 4 lines centered.
Expected Outcome
Thank you!
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>The Impossible Journey</title>
<link rel="icon" href="assets/images/buttons/website_browser_icon.png">
<style>
#font-face{
font-family:myFirstFont;
src: url('assets/fonts/makoa.ttf');
}
#font-face{
font-family:mySecondFont;
src: url('assets/fonts/simplicity.otf');
}
.div1 {
font-family: myFirstFont;
font-size: 10em;
position:relative;
left:50%;
transform: translate(-50%, 10%);
text-align: center;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
position:relative;
text-align: center;
left:50%;
transform: translate(-50%, 50%);
text-align: center;
margin: 0px 100px 0px 0px;
}
.image {
position: fixed;
align-content: space-between;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
}
.button {
position: fixed;
padding-top:40px;
padding-left: 3000px;
float:left;
}
</style>
</head>
<body>
<a href="index.html"><div class="button">
<img src="assets/images/buttons/home_rollover_over.gif" onmouseover="this.src='assets/images/buttons/home_rollover_under.gif'"onmouseout="this.src='assets/images/buttons/home_rollover_over.gif'" ></div>
</a>
<div class="div1"; style="color:black";style="align: middle">Chapter 1: <br>The Stranger</div>
<div class="div2"; style="color:black";style="align: middle">Text Text Text</div>
<div class = "image"; style="align: middle"><img src="assets/images/narrative/man_liferaft.png"></div>
</body>
</html>
there are many mistakes on your code:
- you put ; to separate html tag attributes, you should put it inside the style attribute instead, to separate the styles
- you don't need position: relative just to center the text, you can use text-align
- you also don't need the left: 50% and transform: translate() to center the text, this is a hack when something is difficult to center
- when you using position other than relative (absolute and fixed), you don't need float: right
- also when using position, you can just move it using top, bottom, left, or right, don't make the element bigger by padding it, unless if its necessary
- you can't use justify-content or align-items if you don't use display: flex
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>The Impossible Journey</title>
<link rel="icon" href="assets/images/buttons/website_browser_icon.png">
<style>
#font-face{
font-family:myFirstFont;
src: url('assets/fonts/makoa.ttf');
}
#font-face{
font-family:mySecondFont;
src: url('assets/fonts/simplicity.otf');
}
.div1 {
font-family: myFirstFont;
font-size: 10em;
text-align: center;
color: black;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
text-align: center;
color: black;
margin: 0px 100px 0px 0px;
}
.image {
text-align: center;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
}
.button {
position: fixed;
top: 40px;
right: 40px;
}
</style>
</head>
<body>
<div class="button"><img src="assets/images/buttons/home_rollover_over.gif" onmouseover="this.src='assets/images/buttons/home_rollover_under.gif'"onmouseout="this.src='assets/images/buttons/home_rollover_over.gif'" ></div>
<div class="div1">Chapter 1: <br> The Stranger</div>
<div class="image"><img src="assets/images/narrative/man_liferaft.png"></div>
<div class="div2">You decide to set a path toward the object. As you draw closer, you discover it's a man, passsed out on an inflatable life raft. You tie his life raft to the boat, haul him aboard and wait for him to wake up. <br> Your journey continues.
</div>
</body>
</html>
If you want to view your image after the paragraph, then you shouldn't be using position: fixed. you have to use position: relative also to center align the image you can use flex property.
This is how you CSS should look like, you can adjust the margin paddings as you want.
.div1 {
font-family: myFirstFont;
font-size: 10em;
position:relative;
text-align: center;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
position:relative;
text-align: center;
margin: 0px 0px 0px 0px;
}
.image {
position: relative;
align-content: space-between;
justify-content: center;
align-items: center;
display:flex;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
padding:0 15px;
}
.button {
position: fixed;
padding-top:40px;
right: 40px;
float:left;
}
#header {
margin: *<--This one*
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
margin:0 auto;
display: block;
}
I am building a website in which I encountered that the <h1> element goes behind the fixed navbar. I tried to find the optimal solution for this.
I figured out that many people made an extra <div1> container which had the same height as that of the navbar and then used another <div2> element to write whatever they have to show to the user.
I had a problem with this solution actually my navbar is a responsive one. So I have to make the <div1> element responsive too, using #media.
Then experimenting with margin I found that leaving the margin blank gives me the optimal one. It doesn't requires me to add the <div1> container.
I found this helpful. Since I am newbie in Programming, I don't know if these type of shortcuts are not good to be used.
P.S. I used "Brackets" editor and the live preview was shown in Google Chrome.
edit: the #header is the container for the navbar and is fixed. position:fixed.
It causes everything until the next ; to be treated as invalid and dropped.
It is not a shortcut, it is a longer way to achieve the same effect as not typing margin: position: fixed; at all.
CSS was designed to be very forgiving of errors. There are multiple reasons for this.
Imagine you're using a background-gradient which older browsers might not understand. Your whole CSS code would break.
That's why CSS just continues with the next statement that it can find. For example:
.foo {
color: white;
background: black;
background: linear-gradient(red, yellow);
}
CSS reads the file top to bottom, so first the black background shall be applied and after that the gradient background will be applied. Which will lead to a red/yellowish background in modern browsers.
Without CSS error handling our whole CSS would die in old browsers.
In your case however, CSS reads the following statement:
#header {
margin: position: fixed;
}
Which is an syntax error and neither of those will be applied. CSS will just continue with your width: 100% statement.
When you use a fixed header, you should give margin-top to the next element that is equal to the height of the fixed header, so that it starts after the fixed element. But this will work only if your header is of fixed height. In case your header is not of a fixed height and changes with viewport then add a resize function on body that calculates the height of header on each resize and gives the same value as marginTop to the next element after the fixed element.
body{
margin: 0;
}
#header {
top : 0;
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
height: 65px;
}
#nav-bar a{
display: block;
padding: 9px 16px;
text-align: center;
float: left;
color:azure;
text-decoration:none;
}
#nav-bar a:hover{
background-color: rgba(49, 248, 23, 0.94);
}
.nav-right{
float:right;
font-size: 17px;
text-align: center;
}
#media(max-width:600px){
#nav-bar{
position: relative;
display: flex;
flex-direction: column;
}
.nav-right{
display: flex;
flex-direction: column;
}
}
.logo {
font-family: 'Great Vibes', cursive;
font-size: 30px;
}
#header-img {
height:35px;
width:30px;
}
h2 {
text-align: center;
background: linear-gradient(0deg,red,yellow);
padding: 14px;
}
#form {
display:flex;
justify-content: center;
margin-bottom: 21px;
}
#email {
height: 21px;
width: 250px;
border-radius: 3px;
border-color: #938e8e;
}
section {
position: relative;
top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Bookworms Site</title>
<link href="style-sheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Limelight" rel="stylesheet">
</head>
<body onresize="myFunction()">
<main>
<header id="header">
<div id="nav-bar">
<img src="book.jpg" id="header-img"> The Bookworms Site
<div class="nav-right">
About
Features
Pricing
</div>
</div>
</header>
<div id="abc" style="margin-top: 65px;">
<h2> Hurry!! Offers until Next 20 Hours!!</h2>
<form id="form">
<section>Email:</section>
<input id="email" type="email" placeholder="Enter Your Email">
<button type="submit" url="">Submit</button>
</form>
</div>
</main>
<script>
function myFunction() {
document.getElementById( "abc").style.marginTop = document.getElementById( "header").clientHeight + "px"
}
</script>
</body>
</html>
I am coding a practice site using Microsoft Expression Web 4 but I am having a lot of difficulty getting past the landing page. I have all code copied below the questions. The first problem is that I have a hover effect on the links in the nav menu that overlaps the nav bar and I want the text centered within the nav bar vertically. I have tried several how-tos on css-tricks.com and the browser display doesn't seem to respond to the edits I make I tried from there. navbar issue and overflowing image I can manually adjust it so that if fits by figuring out pixels by trial and error but this seems clunky and non-responsive. Is there a better way?
The second question is the image I have for the header section is not fitting the screen properly. It overflows on the right side. It didn't do this before, but now it is and I haven't changed any of the code in the #header img {} section, so I am not sure what happened. I'm pretty much a beginner at this so thanks for any help.
HTML
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<div id="header">
<div class="nav">
<div id="menu">
Home
Travel
Safari
Live
Search
</div>
</div>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</div>
</head>
CSS
#header {
position:relative;
width: 100vw;
height: 600px;
overflow:hidden;
right: .5em;
bottom: 1em;
}
#header .nav {
display:inline-block;
height:40px;
width:100%;
background-color:#a41d0e;
overflow:visible;
z-index: 10;
}
.nav #menu a{
display: inline;
float:left;
position: relative;
vertical-align:middle;
padding: 1em 1em 1em 1em;
text-decoration: none;
color: white;
}
.nav #menu a:hover {
background-color:#7f170b;
}
Use CSS properties display: flex and align-items: center to center vetically items in a row.
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
height: 40px;
padding: 1em;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
<html>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</header>
<body>
<html>
Nothing except the link tag should be between <head></head> in the exmple you gave! I assume that's a mistake.
#header {
width: 100vw;
height: 600px;
overflow:hidden;
}
technically you don't need any styles for your header. See css for img below. If you want to your header to be 600px, and have your image fill it, you should set your image as a background image in css
background-image: url('path/to/img.jpg');
Alternatively, you could :
/*style your image like so. It won't ever be wider than its immediate parent container*/
img{
max-width: 100%;
height auto;
}
Here is the rest of your css, commented.
#header .nav {
/* no need for any display property here as it is block by default and takes up 100% of the width you probably don't need it to be inline-block either if it'll take up 100% of the width */
height:40px;
background-color:#a41d0e;
/*z-index is only useful for positioned elements (relative, absolute or fixed) so either give position: something to your navbar or ditch the z-index !*/
}
As far as the links go you don't need to give them a top and bottom padding, just give them a line-height that is equal to the height of the container, that is 40px. That way the links will be vertically centered, with the same height as their container, and you will still be able to give them the width of your choice with left and right padding.
.nav #menu a{
/*don't need display: inline as it is negated by the float anyway.
position relative alone like this doesn't serve any purpose. vertical-align middle only works for display: inline-block or table/(s)*/
float:left;
line-height: 40px;
padding: 0 1em 0 1em;
text-decoration: none;
color: white;
}
Very useful link where you'll find a whole lot of very useful explanations on all things CSS : http://tympanus.net/codrops/css_reference/
Hope any of this helps!
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
padding: 15px 35px;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
.outer {
width: 100%;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: 0;
left: 0;
width: 100%;
}
img {
position: relative;
left: 0;
right: 0;
width: 100%;
}
h1 {
text-align: center;
position: absolute;
left: 0;
top:0;
right: 0
}
</style>
</head>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<div class="outer">
<div class="inner">
<img src="https://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
<h1>Visit Africa</h1>
</div>
</div>
</header>
</body>
</html>
Say I have div that is a specified width of 200px. Then I have 3 h1 elements in that div with different amounts of letters / different widths. How do I stretch them horizontally to fill the div?
<div id="Header">
<div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>
What I need is the words to be same width---the width of the containing div.
I tried text-align justify on the h1 but that didn't do any good.
.Logo {
margin-left: 100px;
height:auto;
width: 250px;
background-color:#666;
font-family: Impact, Charcoal, sans-serif;
text-align: justify;
}
.Logo h1 {
font-size: 40;
text-align:justify;
display: inline;
}
I don't think there's a pure CSS way to do it as of now (I mean using some straight CSS way, you need to juggle things around), what you can do is use nth-of-type in CSS and give letter-spacing to each.. this way you don't have to declare classes for each h1 and also you'll get stretched text
Demo
<div class="Logo">
<h1>CORROBORREE</h1>
<br />
<h1>FROG</h1>
<br />
<h1>PROJECT</h1>
</div>
html, body { /* Using this or not depends on you,
nothing to do with the example */
width: 100%;
height: 100%;
}
.Logo {
background: #f00;
width: 300px;
}
.Logo h1:nth-of-type(1) {
letter-spacing: 4px;
}
.Logo h1:nth-of-type(2) {
letter-spacing: 70px;
}
.Logo h1:nth-of-type(3) {
letter-spacing: 25px;
}
Why you want to do it, I don't know, cuz this will look super weird
Use letter-spacing
eg: letter-spacing:20px
Check this out:
Demo
CSS:
#Header{
width:200px;
height:200px;
background-color:grey;
overflow:hidden;
}
#h1{
-webkit-transform:scaleX(0.78);
margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
margin:0 0 0 70px;
}
#h3{
-webkit-transform:scaleX(1.3);
margin:0 0 0 25px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="Header">
<div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1 id='h3'>PROJECT</h1></div></div>
</body>
</html>
text-align:justify and display:block.
And there can be only the one h1-tag on one page