This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed last month.
I added a small div in my page as a cool way to display 3 options to choose, but it's showing the box in the left side. I don't know exactly what I need to use so it displays the div "card" in the middle. I tried Align-items,align-content and even text align but none of them works and I don't know if there is any other option.
body{
background: #212121;
margin: 0;
}
header{
text-align: center;
align-items: center;
font-family: 'Roboto', sans-serif;
color: #ff568e;
border-bottom: 4px dashed #ff568e;
}
.card {
align-items: center;
width: 210px;
height: 254px;
border-radius: 4px;
background: #212121;
display: flex;
gap: 5px;
padding: .4em;
}
.card p {
height: 100%;
flex: 1;
overflow: hidden;
cursor: pointer;
border-radius: 2px;
transition: all .5s;
background: #212121;
border: 1px solid #ff5a91;
display: flex;
justify-content: center;
align-items: center;
}
.card p:hover {
flex: 4;
}
.card p span {
min-width: 14em;
padding: .5em;
text-align: center;
transform: rotate(-90deg);
transition: all .5s;
text-transform: uppercase;
color: #ff568e;
letter-spacing: .1em;
}
.card p:hover span {
transform: rotate(0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
<title>Juego</title>
</head>
<body>
<header>
<h1>QUIERO JUGAR UN JUEGO....</h1> <img src="icons/jigsaw.png" alt="foto Saw" height="256px">
<h2>A continuación, podrás elegir los diferentes niveles...</h2>
<h2>Cada uno más dificil que el otro. GANAR O MORIR. HAZ TU ELECCIÓN</h2>
</header>
<div class="card">
<p><span>HOVER ME</span></p>
<p><span>HOVER ME</span></p>
<p><span>HOVER ME</span></p>
</div>
</body>
</html>
Please, someone let me know what I need to do to center it.
Add to your card class this line: margin: 0 auto;
body{
background: #212121;
margin: 0;
}
header{
text-align: center;
align-items: center;
font-family: 'Roboto', sans-serif;
color: #ff568e;
border-bottom: 4px dashed #ff568e;
}
.card {
margin: 0 auto;
align-items: center;
width: 210px;
height: 254px;
border-radius: 4px;
background: #212121;
display: flex;
gap: 5px;
padding: .4em;
}
.card p {
height: 100%;
flex: 1;
overflow: hidden;
cursor: pointer;
border-radius: 2px;
transition: all .5s;
background: #212121;
border: 1px solid #ff5a91;
display: flex;
justify-content: center;
align-items: center;
}
.card p:hover {
flex: 4;
}
.card p span {
min-width: 14em;
padding: .5em;
text-align: center;
transform: rotate(-90deg);
transition: all .5s;
text-transform: uppercase;
color: #ff568e;
letter-spacing: .1em;
}
.card p:hover span {
transform: rotate(0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
<title>Juego</title>
</head>
<body>
<header>
<h1>QUIERO JUGAR UN JUEGO....</h1> <img src="icons/jigsaw.png" alt="foto Saw" height="256px">
<h2>A continuación, podrás elegir los diferentes niveles...</h2>
<h2>Cada uno más dificil que el otro. GANAR O MORIR. HAZ TU ELECCIÓN</h2>
</header>
<div class="card">
<p><span>HOVER ME</span></p>
<p><span>HOVER ME</span></p>
<p><span>HOVER ME</span></p>
</div>
</body>
</html>
Related
I've been working on this project and I am fully stuck on ensuringing both cards (the image and the project content) are on the same row when displayed on desktop. After a few days, I admit I need help.
Can anyone tell me where I've gone wrong and how I can solve this using flexbox correctly because I am going crosseyed trying to figure it out.
Below is a photo of what it's supposed to look like in desktop.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
justify-content: center;
height: 100vh;
}
h1 {
color: black;
font-family: 'Fraunces', serif;
font-size: 1.875em;
}
h3 {
font-size: 0.75em;
font-weight: 500;
letter-spacing: 7px;
text-transform: uppercase;
}
p {
font-size: 0.75em;
line-height: 1.7;
}
/* ------ ENTIRE CONTAINER --------- */
#card-container {
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
flex-direction: row;
width: 700px;
margin: 0 auto;
}
#card-container row {
display: flex;
flex-direction: row;
margin: 0;
}
#media screen and (max-width : 667px) {
#container {
border-radius: 10px 0 10px 0;
height: 39.7em;
width: 22.8em;
}
}
/* ------ LEFT CONTAINER w/ IMAGE --------- */
.image {
background-image: url(images/image-product-desktop.jpg);
background-repeat: no-repeat;
background-size: contain;
border-radius: 10px 0 0 10px;
height: 394px;
max-width: 50%;
margin-right: 0;
display: flex;
flex-direction: row;
}
#media screen and (max-width : 667px) {
.image {
background-image: url(images/image-product-mobile.jpg);
border-radius: 10px 10px 0 0;
height: 230px;
width: 50%;
margin: 0 auto;
}
}
/* ------RIGHT CONTAINER w/ CONTENT --------- */
.right-container {
background-color: white;
border-radius: 0 10px 10px 0;
height: 450px;
padding: 2em;
width: 50%;
}
#media screen and (max-width : 667px) {
.right-container {
border-bottom-left-radius: 10px;
border-top-right-radius: 0px;
padding: 30px 30px 5px;
width: 50%;
margin: 0 auto;
}
}
.right-container h1 {
margin: auto auto 7% auto;
}
.right-container h3 {
padding-bottom: 1em;
padding-top: 1.9em;
}
.right-container p {
padding-right: 2em;
padding-top: 1.1em;
}
/* ------ PRICES --------- */
.price-container h1 {
color: hsl(158, 36%, 37%);
display: inline-block;
margin-top: 20%;
}
.price-container p {
display: inline-block;
margin-left: 5em;
text-decoration: line-through;
}
/* ------- ADD TO CART --------- */
.cart-btn {
background-color: hsl(158, 36%, 37%);
background-position: 4em;
background-repeat: no-repeat;
border-radius: 10px;
border: transparent;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
padding: 4% 32%;
}
.cart-btn:hover {
background-color: black;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Product preview card component</title>
<!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap"
rel="stylesheet">
</head>
<body>
<section class="card-container">
<div class="row">
<div class="image">
<div class="img-desktop"></div>
<div class="img-mobile"></div>
</div>
</div>
<div class="row">
<div class="right-container">
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</p>
<div class="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<div class="cart-container">
<img src="./images/icon-cart.svg" alt="card-img">
<button class="cart-btn">Add to Cart</button>
</div>
</div>
</div>
</section>
</body>
</html>
To solve this I simply put the element with the background-image in a new div called .left-container. I removed the use of two .row's and put them in one row and set it to display: flex;. I then used Font Awesome for your shopping cart icon.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
justify-content: center;
height: 100vh;
}
h1 {
color: black;
font-family: 'Fraunces', serif;
font-size: 1.875em;
}
h3 {
font-size: 0.75em;
font-weight: 500;
letter-spacing: 7px;
text-transform: uppercase;
}
p {
font-size: 0.75em;
line-height: 1.7;
}
.row {
display: flex;
}
/* ------ ENTIRE CONTAINER --------- */
#card-container {
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
flex-direction: row;
width: 700px;
margin: 0 auto;
}
#card-container row {
display: flex;
flex-direction: row;
margin: 0;
}
/* ------ LEFT CONTAINER w/ IMAGE --------- */
.left-container {
width: 50%;
height: 450px;
}
.image {
background-image: url(https://i.picsum.photos/id/487/200/300.jpg?grayscale&hmac=j_GpFy8cDZyFmRD6sSG09M39jrZwpW3dCYWYnWlC1Vo);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
border-radius: 10px 0 0 10px;
margin-right: 0;
display: flex;
flex-direction: row;
}
/* ------RIGHT CONTAINER w/ CONTENT --------- */
.right-container {
background-color: white;
border-radius: 0 10px 10px 0;
height: 450px;
padding: 2em;
width: 50%;
display: flex;
flex-flow: column;
justify-content: space-around;
}
.right-container h3 {
padding-bottom: 1em;
padding-top: 1.9em;
}
.right-container p {
padding-right: 2em;
padding-top: 1.1em;
}
/* ------ PRICES --------- */
.price-container h1 {
color: hsl(158, 36%, 37%);
display: inline-block;
margin-top: 20%;
}
.price-container p {
display: inline-block;
margin-left: 5em;
text-decoration: line-through;
}
/* ------- ADD TO CART --------- */
.cart-btn {
background-color: hsl(158, 36%, 37%);
background-position: 4em;
background-repeat: no-repeat;
border-radius: 10px;
border: transparent;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
width: 100%;
padding: 1em;
}
.cart-btn:hover {
background-color: black;
cursor: pointer;
}
i {
color: white;
}
.card-container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Product preview card component</title>
<!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap" rel="stylesheet">
</head>
<body>
<section class="card-container">
<div class="row">
<div class="left-container">
<div class="image">
<div class="img-desktop"></div>
<div class="img-mobile"></div>
</div>
</div>
<div class="right-container">
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<div class="cart-container">
<button class="cart-btn"><i class="fa-solid fa-cart-shopping"></i>
Add to Cart</button>
</div>
</div>
</div>
</section>
</body>
</html>
I have made my self page that replicates the solution you want, I have done minimal styling to make you understand how flexbox properties in CSS work (NOTE: I have not made it responsive so try to have a look on desktop view). Refer to my solution and ask question(s) if you are facing any doubts.
* {
margin: 0;
padding: 0;
}
.card-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
font-family: "Montserrat", sans-serif;
font-size: 0.875em;
}
#random-image {
height: 100%;
width: 100%;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.intermediate-container {
display: flex;
width: 60%;
height: 50%;
border-radius: 8px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.55);
}
.left-container {
width: 50%;
}
.right-container {
width: 50%;
padding: 10px;
background-color: white;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Your title</title>
</head>
<body>
<section class="card-container">
<div class="intermediate-container">
<div class="left-container">
<img
id="random-image"
src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
/>
</div>
<div class="right-container">
<div>
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>
A floral, solar and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
</p>
<div class="price-container">
<h1>$149.99</h1>
</div>
<div class="cart-container">
<button class="cart-btn">
<i class="fa-solid fa-cart-shopping"></i> Add to Cart
</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
#card-container row <- use proper selector (.row)
and from given information I can only predict that
I am currently attempting to increase the width of the back-drop filler effect and I am confused on how to do it. The first picture is what I have and the second is what it should look like. I feel it possibly has something to do with increasing the width and height of my nav but when I tried it didn't work out. Could also have something to do with the fact I used absolute with the nav instead of using float but im so copnfused. Thanks.
This is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellefair&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
This is the CSS code
body {
background-image: url(assets/home/background-home-desktop.jpg);
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
}
Hello i have rewrite your code to make an clean code on my version.
body {
background-color: black;
}
.wrapper_navbar {
display: flex;
flex-direction:row;
align-items: center;
}
.logo_navbar {
display: flex;
}
.img_logo {
width: 60px;
height: 60px;
}
hr {
width: 100%;
display: inline-block;
top: 75px;
}
.hr_line{
display:flex;
flex:auto;
}
.navbar {
display: flex;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
padding: 10px 17px;
justify-content: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
text-decoration: none;
color: #ccc;
}
li a {
display: block;
padding: 8px;
}
.item_nav {
margin: 0 5px;
}
<div class="wrapper_navbar">
<div class="logo_navbar">
<div class="logo">
<img src="https://img1.pngdownload.id/20171220/dxq/google-png-5a3aafee6ff5c8.9595681415137955664586.jpg" class="img_logo" />
</div>
</div>
<div class="hr_line">
<hr />
</div>
<div class="navbar">
<ul>
<li class="item_nav">Item 1</li>
<li class="item_nav">Item 2</li>
<li class="item_nav">Item 3</li>
</ul>
</div>
</div>
https://jsfiddle.net/dimaswahyu/ntg09e5b/86/
Here's a simple explanation. Every picture paints a thousand words...
I am in the process of coding a contact page for my business's website but for some reason, when I run my code, my header and my paragraph are distanced very far apart even though I set both the margin and padding to 0. I don't know if this is a CSS glitch or if I did something wrong.
Help would be very much appreciated.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="contact-style.css" rel="stylesheet" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Document</title>
<style>
body{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hero{
border-radius: 15px;
margin-top: -0.8%;
background: rgb(14,39,79);
background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);
width: 98.5%;
height: 94%;
}
h1{
color: white;
font-weight: 400;
font-size: 400%;
display: flex;
place-content: center;
margin-top: 20vh;
margin-bottom: 0;
padding-bottom: 0px ;
}
p{
color: #CFCDD4;
margin-top: 0;
padding-top: 0px;
}
#expand-arrow{
color: white;
margin-top: 37.5vh;
transform: scale(2.5);
transition: 0.4s ease;
}
#expand-arrow:hover{
margin-top: 38.7vh;
}
</style>
</head>
<body>
<div id = "hero" class = "center">
<h1>Contact</h1>
<p class = "center">Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
<ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
</div>
</body>
</html>
It's because you are positioning your paragraph absolutely on the page. You have it set as top: 50%, which means place the paragraph in the middle of the page vertically.
To center it, you can simply use
.center-text {
text-align: center;
}
The .center class seems to be your wrapper class, remove it from the p tag, and center the text with text-align:center.
Another option id add the "flex-box version" you used to center the title: display: flex; place-content: center;
Keep something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="contact-style.css" rel="stylesheet" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Document</title>
<style>
body{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hero{
border-radius: 15px;
margin-top: -0.8%;
background: rgb(14,39,79);
background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);
width: 98.5%;
height: 94%;
}
h1{
color: white;
font-weight: 400;
font-size: 400%;
display: flex;
place-content: center;
margin-top: 20vh;
margin-bottom: 0;
padding-bottom: 0px ;
}
p{
color: #CFCDD4;
margin-top: 0;
padding-top: 0px;
text-align:center;
}
#expand-arrow{
color: white;
margin-top: 37.5vh;
transform: scale(2.5);
transition: 0.4s ease;
}
#expand-arrow:hover{
margin-top: 38.7vh;
}
</style>
</head>
<body>
<div id = "hero" class = "center">
<h1>Contact</h1>
<p>Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
<ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
</div>
</body>
</html>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 2 years ago.
i have a header-container and a quote-container within the body. I like the h1 element to be on the top left of the page and the quote-container in the center of the page.
I applied display:flex to the body and both header-container and quote-container get centered.
How can I center the quote-container only? Is it possible to achieve this using flexbox?
Below are the html and css files:
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: Montserrat, sans-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.header-container {
margin: 0;
width: auto;
max-width: 250px;
text-align: center;
margin-bottom: 10px;
font-size: 1.8rem;
margin-left: 100px;
background-color: lightblue;
}
.quote-container {
width: auto;
max-width: 900px;
padding: 20px 30px;
border: 0.5px solid lightgray;
border-radius: 10px;
}
.quote-text {
font-size: 2.5rem;
}
.quote-author {
margin-top:15px;
font-size: 2rem;
font-weight: 400;
font-style: italic;
}
.button-container {
margin-top: 15px;
display: flex;
justify-content: space-between;
}
button {
cursor: pointer;
font-size: 1.2rem;
width: auto;
height: 2.5rem;
border:none;
border-radius: 10px;
color: #fff;
background: black;
outline: none;
padding: 0.5rem 1.8rem;
box-shadow: 0 0.3rem rgba(121,121,121,0.65);
}
button:hover {
filter:brightness(110%);
}
button:active {
transform: translate(0,0.3rem);
box-shadow: 0 0.1rem rbga(255,255,255,0.65);
}
.twitter-button:hover {
color: #38a1f3;
}
.fa-twitter {
font-size:1.5rem;
}
/* Loader */
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #333;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quotes</title>
<link rel="icon" type="image/png" href="favicon.png">
<!-- Old Favicon - Grab Icon From Google (Might be unsupported in the future) -->
<!-- <link rel="icon" type="image/png" href="https://s2.googleusercontent.com/s2/favicons?domain=jacinto.design"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header-container">
<h1>Quotes</h1>
</div>
<div class="quote-container" id="quote-container">
<div class="quote-text" id="quote-text">
<i class="fa fa-quote-left"></i>
<span id="quote"></span>
</div>
<div class="quote-author" id="author">
<span id = "author"></span>
</div>
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet This!" >
<i class="fab fa-twitter"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Loader -->
<div class="loader" id="loader"></div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
final output as below
Is that how you want to display?
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: Montserrat, sans-serif;
font-weight: 700;
display: flex;
flex-direction: column;
}
.header-container {
margin: 0;
width: auto;
max-width: 250px;
text-align: center;
margin-bottom: 10px;
font-size: 1.8rem;
background-color: lightblue;
}
.quote-container {
width: auto;
max-width: 900px;
padding: 20px 30px;
border: 0.5px solid lightgray;
border-radius: 10px;
align-self: center;
justify-self: center;
}
.quote-text {
font-size: 2.5rem;
}
.quote-author {
margin-top:15px;
font-size: 2rem;
font-weight: 400;
font-style: italic;
}
.button-container {
margin-top: 15px;
display: flex;
justify-content: space-between;
}
button {
cursor: pointer;
font-size: 1.2rem;
width: auto;
height: 2.5rem;
border:none;
border-radius: 10px;
color: #fff;
background: black;
outline: none;
padding: 0.5rem 1.8rem;
box-shadow: 0 0.3rem rgba(121,121,121,0.65);
}
button:hover {
filter:brightness(110%);
}
button:active {
transform: translate(0,0.3rem);
box-shadow: 0 0.1rem rbga(255,255,255,0.65);
}
.twitter-button:hover {
color: #38a1f3;
}
.fa-twitter {
font-size:1.5rem;
}
/* Loader */
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #333;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quotes</title>
<link rel="icon" type="image/png" href="favicon.png">
<!-- Old Favicon - Grab Icon From Google (Might be unsupported in the future) -->
<!-- <link rel="icon" type="image/png" href="https://s2.googleusercontent.com/s2/favicons?domain=jacinto.design"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header-container">
<h1>Quotes</h1>
</div>
<div class="quote-container" id="quote-container">
<div class="quote-text" id="quote-text">
<i class="fa fa-quote-left"></i>
<span id="quote"></span>
</div>
<div class="quote-author" id="author">
<span id = "author"></span>
</div>
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet This!" >
<i class="fab fa-twitter"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Loader -->
<div class="loader" id="loader"></div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}