I have this code and i want to have the “Links:” above the link but it stays on the same line. Does anyone know how to get them on their own line?
div {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
height: 100vh;
}
h1 {
color: white
}
div:nth-child(3) {
background-image: url(img/bbground.jpeg);
background-size: contain;
background-position: center;
}
<div id="lols" { text-align: center; }>
<h1>Links:</h1><br>
<a style="color:white; font-family:verdana;" href="https://bobjoerules.github.io/DarkMode-sheet" title="Home"><img src="img/darkmode sheet.png" alt="DarkMode-sheet-logo" width="192" height="108"></a>
</div>
Related
Here is how my code currently renders, but I want it to look like this
* {
box-sizing: border-box;
}
body {
background: rgb(75, 109, 221);
color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
display: flex;
justify-content: center;
position: relative;
top: 100px;
}
button {
height: 100px;
width: 150px;
background-color: white;
font-size: large;
}
<div className="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>
You can do this using flex-direction: column, which basically flips the uses of justify-content and align-items. Then, set align-items: center and justify-content: space-between and set a height for the container (I used 300px).
* {
box-sizing: border-box;
}
body {
background: rgb(75, 109, 221);
color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
top: 100px;
height: 300px;
}
button {
height: 100px;
width: 150px;
background-color: white;
font-size: large;
}
<div className="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>
Any time you need help with display: flex;, you should test your ideas on the Yoga Layout Playground. It's an extremely powerful tool for positioning elements.
.Home
{
display: inline;
}
.Home
{
display: inline;
}
<div class="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>
* {
box-sizing: border-box;
}
body {
background: rgb(75, 109, 221);
color: black;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.Home {
margin:13% 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.Home > button {
height: 100px;
width: 150px;
background-color: white;
font-size: large;
margin:50px 0;
}
<div class="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>
I am not able to align center the following divs on the full page width:
header
content
footer
But it does not work! Whats needs to be changed within my CSS to get it working?
body {
margin:0;
padding:0;
}
#wrapper {
display: flex;
flex-direction: column;
}
#header {
height: 50px;
}
#hero-wrapper {
background-image: url('https://unsplash.it/1500?random');
background-size: cover;
background-position: center;
width: 100vw;
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
color:#ffffff;
}
#hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#hero-text{
font-family:'Roboto';
font-weight:900;
font-size:2em;
text-align:center;
}
#hero-footnote {
font-family: 'Cabin', sans-serif;
font-size: 12px;
padding: 5px 5px 10px 5px;
}
#content {
width: 1024px;
background-color:green;
}
#footer {
font-family: 'Cabin', sans-serif;
weight: 400;
background-color: #ffffff;
/* position: fixed; */
bottom: 0;
left: 0;
width: 100%;
font-size: 0.685em;
color: #1a1717;
padding-bottom: 5px;
}
#footer-info {
width: 1024px;
margin: auto;
padding-left: 3px;
padding-right: 3px;
text-align: left;
line-height: 42px;
}
span#footer-social-icons {
}
span#copyright-info {
font-family: 'Cabin', sans-serif;
weight: 400;
padding-left:10px;
}
span#contact-link {
font-family: 'Source Sans Pro', sans-serif;
weight: 200;
padding-left:10px;
}
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Source+Sans+Pro:wght#200&family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<div id="wrapper">
<div id="header">header</div>
<div id="hero-wrapper">
<div id="hero">
<div id="hero-text">
<span id="hero-header">sell the product</span><br />
<span id="hero-sub">On this page for less</span>
</div>
</div>
<div id="hero-footnote">© Copyright Text</div>
</div>
<div id="content">
<!-- Content-Loop -->
<div class="article">
Here come the Article
</div>
</div>
<div id="footer">
<div id="footer-info">
<span id="footer-social-icons"></span> <span id="copyright-info">Made with love by Y.</span> <span id="contact-link">Contact</span>
</div>
</div>
</div>
You can add align-items: center; to #wrapper.
Normally if you would have flex-direction: row; centering things would be justify-content: center; but as column change the axis so does the alignment properties. They kinda "go with the axis".
One thing though, I would strongly suggest that you don't style with id, use classes for that.
body {
margin:0;
padding:0;
}
#wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
#header {
height: 50px;
}
#hero-wrapper {
background-image: url('https://unsplash.it/1500?random');
background-size: cover;
background-position: center;
width: 100vw;
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
color:#ffffff;
}
#hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#hero-text{
font-family:'Roboto';
font-weight:900;
font-size:2em;
text-align:center;
}
#hero-footnote {
font-family: 'Cabin', sans-serif;
font-size: 12px;
padding: 5px 5px 10px 5px;
}
#content {
width: 1024px;
background-color:green;
}
#footer {
font-family: 'Cabin', sans-serif;
weight: 400;
background-color: #ffffff;
/* position: fixed; */
bottom: 0;
left: 0;
width: 100%;
font-size: 0.685em;
color: #1a1717;
padding-bottom: 5px;
}
#footer-info {
width: 1024px;
margin: auto;
padding-left: 3px;
padding-right: 3px;
text-align: left;
line-height: 42px;
}
span#footer-social-icons {
}
span#copyright-info {
font-family: 'Cabin', sans-serif;
weight: 400;
padding-left:10px;
}
span#contact-link {
font-family: 'Source Sans Pro', sans-serif;
weight: 200;
padding-left:10px;
}
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Source+Sans+Pro:wght#200&family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<div id="wrapper">
<div id="header">header</div>
<div id="hero-wrapper">
<div id="hero">
<div id="hero-text">
<span id="hero-header">sell the product</span><br />
<span id="hero-sub">On this page for less</span>
</div>
</div>
<div id="hero-footnote">© Copyright Text</div>
</div>
<div id="content">
<!-- Content-Loop -->
<div class="article">
Here come the Article
</div>
</div>
<div id="footer">
<div id="footer-info">
<span id="footer-social-icons"></span> <span id="copyright-info">Made with love by Y.</span> <span id="contact-link">Contact</span>
</div>
</div>
</div>
If you just want to center the text, use text-align: center and the parts?
Or if you are looking to do more centered-content, maybe make your #header, #content, and #footer the following:
display: flex;
flex-direction: column;
align-items: center;
Basically, flex boxes within flex boxes.
The issue im having is I'm struggling to keep my riot games text fluid, when i resize my browser it seems like it's stuck where it's at. either the left side or the right, usually the right side has more space from the end of the S to the side of the window.
// The showcase is just the container
// containing the background image.
.showcase {
position: relative;
width: 100%;
height: 35.76em;
text-align: center;
background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
// Info Text is The Main Text
// I'm trying to keep centered and fluid **
.info-text {
color:white;
position: absolute;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 6.5em;
font-weight: bold;
margin: 0;
top: 15%;
left: 25%;
}
// I just ended up adding in the flex-box properties hoping to fix it,
// but im not too sure if it made things worse or actually helped out.
#media only screen and (max-width: 768px) {
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.info-text {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
height: 25vh;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 3.5em;
font-weight: bold;
top: 38%;
left: 10%;
margin: 0;
}
<section class="showcase">
<div class="welcome-headline">
<h6>Welcome</h6>
</div>
<div class="info-text">
<p>
Riot Games
</p>
</div>
</section>
You can use flexbox for that with this properties on the container (background image in your case):
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
Example:
.showcase {
position: relative;
width: 100%;
height: 35.76em;
text-align: center;
background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.info-text {
color: white;
position: absolute;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 6.5em;
font-weight: bold;
}
#media only screen and (max-width: 768px) {
.info-text {
font-size: 3.5em;
}
}
<section class="showcase">
<div class="welcome-headline">
<h6>Welcome</h6>
</div>
<div class="info-text">
<p>
Riot Games
</p>
</div>
</section>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
Hi,
I want the logo 'Abyk Deco' to stay at the top of the page, but it's now centered along with the two heading text. How can I align this at the top using flexbox? I've tried this code.
<body>
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco<span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
The CSS:
.banner{
height: 100%;
background-image: url(../img/1.jpeg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo{
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
align-items: flex-start;
justify-content: center;
}
.logo a{
color: #fff;
}
#red{
color: red;
}
.heading{
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.heading h1{
font-size: 4.5em;
}
.heading h4{
font-size: 2em;
}
How can I align the logo to the top while the heading texts stay at the center? I prefer to use flexbox to solve this problem. Thank You.
.container{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items:center;
justify-content: flex-start;
background-color: gray;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
<div class="container">
<div class="logo">
<p>Text something </p>
<p>Something else </p>
<p>What else?</p>
</div>
</div>
Try to use this.
The main trick here to be able put the logo at the top and heading in the center of the viewport, is to use the ::after pseudo element to match the logo and then add this rule and make them equal high by setting flex-grow to 1 and flex-basis to 0
.logo, .heading, .banner::after {
content: ''; /* for the pseudo to render */
flex: 1 1 0; /* grow/shrink equal based on zero content */
}
Stack snippet
html, body {
height: 100%;
margin: 0;
}
.banner {
height: 100%;
background-image: url(http://placehold.it/300x100/555);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
}
.logo a {
color: #fff;
}
#red {
color: red;
}
.heading {
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.heading h1 {
font-size: 4.5em;
margin: 0; /* remove default margin */
}
.heading h4 {
font-size: 2em;
margin: 0; /* remove default margin */
}
.logo, .heading, .banner::after {
content: ''; /* for the pseudo to render */
flex: 1 1 0; /* grow/shrink equal based on zero content */
}
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco</span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
If the heading should be in the center of the space left (between the end of the logo and page bottom), use auto margin on the heading
html, body {
height: 100%;
margin: 0;
}
.banner {
height: 100%;
background-image: url(http://placehold.it/300x100/555);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
}
.logo h1 {
margin-bottom: 0; /* remove default margin */
}
.logo a {
color: #fff;
}
#red {
color: red;
}
.heading {
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto 0;
}
.heading h1 {
font-size: 4.5em;
margin: 0; /* remove default margin */
}
.heading h4 {
font-size: 2em;
margin: 0; /* remove default margin */
}
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco</span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
Change align-items to flex-start
.banner{
height: 100%;
background-image: url(../img/1.jpeg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
Remove the following styles from banner class would do.
justify-content: center;
align-items: center;
Add the following styles to logo class
align-items: center;
justify-content: center;
display: flex;
body {
margin: 0
}
.banner {
height: 100%;
background-image: url('https://images.designtrends.com/wp-content/uploads/2015/11/06084012/Dark-Brown-Bricks-Backgroud.jpg');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
}
.logo {
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
align-items: center;
justify-content: center;
display: flex;
}
.logo a {
color: #fff;
}
#red {
color: red;
}
.heading {
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.heading h1 {
font-size: 4.5em;
}
.heading h4 {
font-size: 2em;
}
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco<span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
Try to add flex-grow: 1; to the .heading, align-self: center; to the .logo and remove margin-top from the .logo H1 (optional)
HTML:
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco<span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
CSS:
.banner{
height: 100%;
min-height: 100vh;
background-image: url(../img/1.jpeg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
}
.logo {
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
align-self: center; /*added*/
}
.logo a{
color: #fff;
}
.logo H1 { /*added*/
margin-top: 0;
}
#red{
color: red;
}
.heading {
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-grow: 1; /*added*/
}
.heading h1{
font-size: 4.5em;
}
.heading h4{
font-size: 2em;
}
Code exmaple on JSFiddle
The trick is to add margin: 0 auto auto auto; to both your .logo and .heading
p.s. I have minimize the font size so that you can see the preview properly in the code snippet or just check out the preview on full screen
html{
height:100%;
}
body{
background:grey;
height:100%;
}
.banner{
height: 100%;
background-image: url(../img/1.jpeg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo{
color: #fff;
font-size: .9em;
font-family: 'Oswald', sans-serif;
margin: 0 auto auto auto;
}
.logo a{
color: #fff;
}
#red{
color: red;
}
.heading{
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 auto auto auto;
}
.heading h1{
font-size: 2em;
margin: 0;
}
.heading h4{
font-size: 1.3em;
}
.logo h1 {
margin: 0;
}
.heading h1 {
margin-bottom: 0;
}
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco<span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
I´m starting my web developer training and i´m having trouble to move (in this case center) icons / images and text inside flexboxes.
Can anyone help?
my html
<div class="thirdcontainer">
<span class="flex3">
<img src="../challenge/img/feature-quality.png">
<img src="../challenge/img/feature-reliability.png">
<img src="../challenge/img/feature-speed.png"> </span>
</div>
My CSS
.thirdcontainer{
width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
align-items: center;
justify-content: center;
}
.thirdcontainer{
width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
align-items: center;
justify-content: center;
}
You forgot to add display: flex; to the containers CSS...
(note: I changed width to max-width for this example to make it fit in the snippet window).
.thirdcontainer{
max-width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="thirdcontainer">
<span class="flex3">
<img src="../challenge/img/feature-quality.png">
<img src="../challenge/img/feature-reliability.png">
<img src="../challenge/img/feature-speed.png"> </span>
</div>