I am a beginner in HTML and StackOverflow and was trying to create a web page. I learned how to create this grid through some research but I am not sure how I would align it to the center of the web page. I tried using justify-content: center; but had no luck. Help would be greatly appreciated.
The actual web page
The CSS code:
.image-grid {
--gap: 16px 16px;
--num-cols: 4;
--row-height: 40px;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: car(--row-height);
gap: var(--gap);
}
img {
border-radius: 15px;
border: 5px solid;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 5px;
bottom: 0;
left: 5px;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: 0.5s ease;
border-radius: 10px;
background-color: rgb(149, 69, 53);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: black;
font-family: "Courier New", Courier, monospace;
font-size: 20px;
font-weight: bold;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
The Html code (I have 16 pictures in my grid so the is basically repeated 16 times):
<div class="image-grid">
<div class="container">
<img
src="picture"
alt="Avatar"
class="image"
/>
<div class="overlay">
<div class="text">Angelite<br /><br />STONE OF AWARENESS</div>
</div>
</div>
<div>
You meant this?
.image-grid {place-items: center;}
By the way pay attention to your last line! Don't forget to close the tag!
To center the images inside the grid:
Your width: 50%; on your .container is causing this problem.
Remove it and then apply justify-items: center; to .image-grid.
div {
display: grid;
place-items: center;
}
Try this
Related
when the screen gets smaller on my website, the elements go to irrelevant places. I did some research and thought I could remove it using '%' but it didn't work.
This is 1 scale:
This is 0.25 scale
/*my container*/
.container-home{
width: 100%;
height: 60rem;
display: flex;
align-items: center;
}
/*
the articles are here*/
.words {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100vh;
margin-left: 25vh;
transition: 1.5s;
}
.header{
font-size: 5rem;
font-weight: 500;
}
.description {
display: block;
margin-top: 3rem;
font-size: 2rem;
}
/*explore text span*/
.explore{
margin-top: 2.5rem;
width: 15rem;
height: 4rem;
text-align: center;
display: block;
font-size: 2rem;
border: 0.1rem solid #000;
border-radius: 2.5rem;
margin-left: 1.5rem;
position: relative;
z-index: 1;
}
/*explore text a*/
.explore a{
display: block;
text-decoration: none;
font-size: 2rem;
color: #000;
text-align: center;
margin-top: 0.7rem;
}
.explore:hover {
border-color: transparent;
text-align: center;
transition: 1s;
transform: translateY(0.6rem) translateX(-1rem);
}
/*colored rectangle under text explore*/
.explore-hover{
display: inline;
position: absolute;
width: 15rem;
height: 4rem;
border-radius: 2.5rem;
background-color: #f1e0d4;
top: 42rem;
}
/*circle , solid circle and image in this*/
.image-design{
width: 100%;
height:100vh;
}
.circle{
position: relative;
width: 100%;
height: 100%;
clip-path: circle(300px at center);
background-color: #d7e7f1;
margin-top:8rem;
}
.solid-circle{
position: absolute;
width: 60rem;
height: 60rem;
border-radius: 50%;
background-color: transparent;
top: 30%;
left: 28%;
border: 1px solid #3398d7;
}
/*I created it to put an image on top of the circles*/
.conainer-image-design{
position: absolute;
width: 100%;
left: 25rem;
height:100vh;
}
.image{
position: relative;
top: 25%;
left: 12%;
}
<div class="container-home">
<div class="words">
<span class="header">
Handcrafted<br>
& ethically sourced
</span>
<span class="description">A collection inspired by old-world charm, crafted
<br>with moisannites and diamonds.
</span>
<span class="explore">Explore→</span>
<div class="explore-hover"></div>
</div>
<div class="image-design">
<div class="conainer-image-design">
<div class="circle"></div>
<div class="solid-circle"></div>
</div>
<span class="image"><img src="./ring.png"></span>
</div>
</div>
what do you recommend to give the measurements, I mainly use rem or % .which is better to keep the image intact?
May I please know how can I align the login button to the center of the page? I can't seem to do it althoughI've tried many suggestions from previous posts like this.
Need help on this.
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: 50%;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
You've given your button a position of absolute, so you're looking to also apply left: 50%. However, you probably actually also want to subtract the offset from your width, so that the element remains perfectly in the center. In this case, you're looking for left: 45%, as the element has a width of 10%. The same goes for top, which can be calculated with calc(50% - (48px / 2)):
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: calc(50% - (48px / 2));
left: 45%; /*calc(50% - (10% / 2)); */
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
Hope this helps :)
Is this what you want?
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This put the button at the center of the html.
body {
background: white;
margin: 0;
font-family: Arial;
}
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</body>
Add this:
button {
left : 50%;
}
.wrapper{
display: flex;
justify-content: center;}
<div class="wrapper">
<button> Sample </button>
</div>
.wrapper{
display: flex;
justify-content: center;
}
<body>
<table style="width:100%;height:100%">
<tr><td style="text-align:center;vertical-align:middle">
<button>Click me</button>
</td></tr>
</table>
</body>
I'm running into problems trying to center a body element with CSS. I want it to be centered both horizontally and vertically on the page. The problem is that how it's written right now, it will center the text for short messages (i.e. under three words), but longer messages mess it up.
Here's my CSS: (it's an erb file for Sinatra, but I don't think that should impact how the CSS is interpreted)
body {
background: white;
/*TODO: still not perfect; changes based on length of message */
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.message {
color: #2f4f4f;
font-family: 'Roboto', sans-serif;
font-size: 36;
text-align: center;
}
.form {
text-align: center;
}
input[type=number]{
width: 100%;
border: none;
border-bottom: 6px solid #2f4f4f;
background: transparent;
text-align: center;
color: #2f4f4f;
font-size: 25px;
font-family: 'Roboto';
}
input[type=number]:focus {
outline: none;
}
#btn{
display: none;
}
body {
/* ... */
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Please make sure you remove the margin.
Try use 'flexbox' to your page
.container {
display: flex;
height: 500px;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="content">
Content
</div>
</div>
You can use display: flex
html, body {
width: 100%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
Demo
HTML
<div class="test">
<div class="content">
<p class="para">test test test</p>
</div>
</div>
CSS
.test { }
.para {
width: 100%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
I am running into an issue where my contact-section-left is not centering in the parent div. This is not a vertical-align: top issue. You can see the border-right white line, that is showing how much the height extends for the contact-section-left div is, but I am it to be the same size as the right side with the image (sorry the example doesn't have the image).
I am not sure if I am going for the wrong approach here or what, but I am wanting it to look like the paint image I made below.
Any ideas?
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
border-right: 1px solid #FFF;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your entire code can be simplified as follows. I use a pseudo element for the vertical line in between, and shift the position with order via flexbox.
jsFiddle
#contact-section {
display: flex;
justify-content: space-around;
align-items: center;
color: #FFF;
background: #00a16d;
padding: 1em 2em;
}
#contact-section:before {
content: "";
flex: 0 0 1px;
height: 2em;
background: #fff;
order: 2;
}
#contact-section-left {
font-size: 1.5em;
order: 1;
font-style: italic;
}
#contact-section-right {
background: url("https://i.imgur.com/cLMHUZE.png") center / contain no-repeat;
font-size: 2em;
order: 3;
padding: .5em 0;
}
<div id="contact-section">
<div id="contact-section-left">Tell us more about your project.</div>
<div id="contact-section-right">Contact us</div>
</div>
Assiging display: flex; align-items: center; to the parent of the left/right sections will display them side-by-side and center them vertically. Then if you move the border-right from the left (shorter) element to a border-right of the right (taller) element, the line should look more like you want it.
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
display: flex;
align-items: center;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
border-left: 1px solid #FFF;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your #contact-section-wrap doesn't have a height. The height: 100%s you are setting aren't really doing anything. They still rely on a parent height to have any idea what they're getting 100% of.
Try setting a height on #contact-section-wrap.
I have a button and a link aligned to column with flexbox. I want to change just the link and button to fit onto one row at max-width: 800px; I have searched for and found no answer that fits exactly what I need. Hope someone can help and it is probably an easy fix but I can't seem to figure it out.
Here is my CSS & HTML:
.landing {
position: relative;
}
#pic {
display: flex;
}
#pic figcaption {
position: absolute;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 7vw;
z-index: 1;
top: 30%;
left: 50%;
transform: translateX(-50%);
color: #ffff66;
}
#media (max-width: 800px) {
.buttonWrapper {
display: flex;
flex-direction: row;
}
}
/*****Signup button*****/
.home-signup {
position: absolute;
font-size: 2.5vw;
border: 2px solid #ffff66;
border-radius: 10px;
color: #ffff66;
padding: 0.5em 2.5em;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
cursor: pointer;
}
/****login button****/
.home-login {
position: absolute;
font-size: 1.8em;
color: #ffff66;
top: 72%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
<section class="landing">
<figure id="pic">
<img srcset="images/detail/landingBig.jpg 1920w,
images/detail/landingMedium.jpg 960w,
images/detail/landingSmall.jpg 480w" sizes="100vw" src="images/detail/landingMedium.jpg" alt="Top Banner with pic of two speakers on a wooden floor">
<figcaption>Collabo</figcaption>
</figure>
<div class="buttonWrapper">
<button class="home-signup">Signup</button>
<a class="home-login" href="#">Login</a>
</div>
</section>
I would do a reset on a few rules and write or load mediaqueries last:
#media (max-width: 800px) {
.buttonWrapper {
display: flex;
border: solid;
flex-direction: row;
left: 0;
width: 100%;
justify-content: center;
position: absolute;
top: 60%;
}
.home-signup,
.home-login {
transform: scale(1);
margin: 1em;
position: static;
}
}
.landing {
position: relative;
}
#pic {
display: flex;
}
#pic figcaption {
position: absolute;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 7vw;
z-index: 1;
top: 30%;
left: 50%;
transform: translateX(-50%);
color: #ffff66;
}
/*****Signup button*****/
.home-signup {
position: absolute;
font-size: 2.5vw;
border: 2px solid #ffff66;
border-radius: 10px;
color: #ffff66;
padding: 0.5em 2.5em;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
cursor: pointer;
}
/****login button****/
.home-login {
position: absolute;
font-size: 1.8em;
color: #ffff66;
top: 72%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#media (max-width: 800px) {
.buttonWrapper {
display: flex;
border: solid;
flex-direction: row;
left: 0;
width: 100%;
justify-content: center;
position: absolute;
top: 60%;
}
.home-signup,
.home-login {
transform: scale(1);
margin: 1em;
position: static;
}
}
<section class="landing">
<figure id="pic">
<img src="http://lorempixel.com/800/600" alt="Top Banner with pic of two speakers on a wooden floor">
<figcaption>Collabo</figcaption>
</figure>
<div class="buttonWrapper">
<button class="home-signup">Signup</button>
<a class="home-login" href="#">Login</a>
</div>
</section>