[![
Document
LesShop
The most popular book shop for IT
</body>
</html>][1]][1]
* {
margin: 0;
padding: 0;
}
.context {
color: white;
background-color: #201dd6;
width: 60%;
height: 900px;
top: 60px;
text-align: center;
}
I want to align the text down and in the middle like in the photo.
However, I couldn't make it. I also wrote my CSS codes. I'm really bad
at CSS. Can you help me?
Use this :
.context {
color: white;
background-color: #201dd6;
width: 60%;
height: 900px;
top: 60px; /* Not used without the position property */
text-align: center;
display: flex; /* add this */
align-items: center; /* add this */
justify-content: center; /* add this */
}
Ctrl + Shift + i on chrome and use the developing tools :
* {
margin: 0;
padding: 0;
}
.context {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
background-color: #201dd6;
height: 100vh;
width: 60%;
margin: 0 auto;
}
<div class='context'>
<h2>LesShop</h2>
The most popular book shop for IT
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 12 months ago.
I know this is a generic question, but I looked everywhere and couldn't find anything, here's my code :
<a href='/Customers' class='centre'>Start</a>
I tried encasing this in a div tag too but couldn't get that to work. I also want a small grey box around it as a background.
my css code:
a {
width: 100%;
height: 250px;
display: inline-block;
}
.centre {
text-align: center;
display: inline-block;
font-size: 20px;
font-family: 'Roboto', sans-serif;
background-color: grey;
}
Use flex. Also, use from 4 code lines specified for aligned vertically:
*{
box-sizing: border-box;
}
body{
margin: 0;
}
div{
width: 100%;
height: 200px;
background-color: grey;
display: flex;
align-items: center;
justify-content: center;
position: absolute; /*here*/
top: 50%; /*here*/
transform: translateY(-50%); /*here*/
margin: 0; /*here*/
}
.centre {
text-align: center;
line-height: 150px; /*for aligning of text vertically in anchor tag*/
background-color: red;
width: 90%;
display: inline-block;
font-size: 20px;
font-family: 'Roboto', sans-serif;
text-decoration: none;
color: white;
}
<div>
<a href='/Customers' class='centre'>Start</a>
</div>
For more knowing about flex, see the first comment.
With your given code snippet you can do it like below.
Just change display: inline-block to display: flex and add those attirbutes:
justify-content: center;
align-items: center;
.linkContainer {
display: flex;
justify-content: center;
width: 100%;
}
.button {
border-radius: 5px;
text-align: center;
width: 75px;
padding: 5px 10px;
background-color: grey;
}
.button a {
color: white;
font-size: 20px;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
<div class="linkContainer">
<div class="button">Start</div>
</div>
I did edit this code. Your link is now a "button", so it might be easier for you to understand.
But I'd recommend you to learn a bit on your own: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
Need to center this text in this way:
Basically, the top part to the left and the bottom part to the right, but with a bit of overlap.
How can I do that in HTML/CSS?
You can center the text vertically by using the centering with transform technique. Then the text should be separated into two lines and aligned to left/right plus a small negative margin so it overflows outside of the circle.
div {
height: 130px;
width: 130px;
background: lightblue;
position: relative;
border-radius: 50%;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
width: 100%;
}
span {
display: block;
}
span:first-of-type {
text-align: left;
margin-left: -7px;
}
span:last-of-type {
text-align: right;
margin-right: -7px;
}
<div>
<p>
<span>La crèativitè</span>
<span>est contagieuse</span>
</p>
</div>
Simply use 2 elements for those 2 lines and add a margin-left to the second element:
.logo p {
margin: 0;
}
.logo p:nth-of-type(2) {
margin-left: 3.5em;
}
/* for demonstration purpose only */
html {
font-size: 40px;
font-family: Arial;
}
<div class="logo">
<p>La crèativitè</p>
<p>est contagieuse</p>
</div>
Another entirely different (and more complicated) approach is to use flex-box. It requires you to use containers and to know the principles of flex-box. But once you know what you're doing, it becomes fairly simple to center things inside of other things.
If you need somewhere to practice flex-box with simple games, you can visit https://flexboxfroggy.com/.
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
.logo {
width: 200px;
height: 200px;
background-color: maroon;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
p {
font-size: 20px;
}
#p1 {
align-self: flex-start;
}
#p2 {
align-self: flex-end;
}
<div class="container">
<div class="logo">
<p id="p1">La crèativitè</p>
<p id="p2"> est contagieuse</p>
</div>
</div>
Bonne Chance!
I have two problems :
How to make the text container rotated in front of background and cut its top like this example. My current approach make it overflow the bottom of the background :
https://codepen.io/fadhilradh/pen/wvdZPEE
.wrapper {
background-image: linear-gradient(
to right,
#00dbde,
#00cfff,
#00b8ff,
#6a8cff,
#fc00ff
);
height: 800px;
width: 100%;
}
.banner {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 16px;
background: black;
border-radius: 12px;
border: 20px solid white;
height: 80%;
width: 100%;
font-family: "Source Code Pro";
transform: rotate(-30deg);
margin-top: -300px;
}
<div class="wrapper">
<div class="banner"/>
</div>
How to make the inside border rounded like the example.
I really appreciate if you can help me
Possibly something like this?
body {
overflow: hidden;
}
.wrapper {
background-image: linear-gradient(
to right,
#00dbde,
#00cfff,
#00b8ff,
#6a8cff,
#fc00ff
);
height: 800px;
width: 100%;
}
.banner {
color: #35C222;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 16px;
background: black;
border-radius: 50px;
border: 30px solid white;
height: 70%;
width: 100%;
font-family: "Source Code Pro";
transform: rotate(-30deg);
margin-top: -300px;
}
.frontend {
font-size: 70px;
margin-bottom: 0;
margin-left: 100px;
}
.time {
transform-origin: bottom left;
transform: rotate(90deg) translate(-80%);
}
<div class="wrapper">
<div class="banner">
<p class="time">{time.format("MMMM Do YYYY, h:mm:ss")}</p>
<p class="frontend"> < SPE / Frontend > </p>
</div>
</div>
Add following lines to the CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Just make sure that the border is smaller than the border-radius.
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'm trying to create a text gradient in WordPress (I'm using SiteOrigin pagebuilder), but it doesn't work in Edge or Safari; the text has no color in either browser.
I've tried these suggestions:
CSS3 Text Gradients not working?
Gradient not working in Safari
But both solutions just gave me a linear background gradient, not a text gradient.
Here's the code I'm currently using:
<style>
.flip-up {
/*background: linear-gradient(90deg, #97b3e1ff, #c5c95df0);*/
background-image: linear-gradient(90deg, #97b3e1ff, #c5c95df0);
-o-background-clip: text;
-ms-background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
-o-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
</style>
The text animations have been tested on their own (I'm using the Scroll Triggered Animations plugin); they work just fine in every major browser, so I know that's not the problem. My website is https://douxdolci.com/ (headers like "Affordable and Effective" are the problem). Any help would be appreciated!
Also: If there's no way to accomplish this, is there a way to use solid-color text in just Edge and Safari, but a gradient in all other browsers?
What you have to do is display: block; the element(s) containing the text you want color-gradiented.
Be aware that this means that you may now have to vertically center text with the line-height attribute and align text horizontally with text-align . . .
Safari and Edge need it this way - don't go figure, just go do it !
The logotype in this pen shows a simple example.
Please advise if it breaks in Safari - I shudder to imagine how Lambda Test may render it.
HTML
<body>
<header>
<div class="logodiv">
<div class="logo">
<img src='https://images.unsplash.com/photo-1593003520833-5c874a3cef28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='My Logo'/>
</div>
<div class="logotext">
<div class="logotext1">Coca-Cola</div>
<div class="logotext2">The Real Thing</div>
</div>
</div>
<nav>
<ul class="navbar">
<li id="redlink" onclick="PAGE.switchPage('redlink')" class="link on">
RED
</li>
<li id="whitelink" onclick="PAGE.switchPage('whitelink')" class="link">
WHITE
</li>
<li id="bluelink" onclick="PAGE.switchPage('bluelink')" class="link">
BLUE
</li>
</ul>
</nav>
</header>
<article>
<section id="redpage" class="redpage band">
THIS IS RED PAGE FULL OF STUFF
</section>
<section id="whitepage" class="whitepage band hidden">
THIS IS WHITE PAGE FULL OF STUFF
</section>
<section id="bluepage" class="bluepage band hidden">
THIS IS BLUE PAGE FULL OF STUFF
</section>
</article>
<footer>
<div class="foot-cont">Oh . . . What An Awful Footer !
</div>
</footer>
</body>
CSS
html {
writing-mode: horizontal-tb;
box-sizing: border-box; /* Keeps borders inside the element bounds. */
font-size: 62.5%; /* Allows 1 rem = 10px in child and nested elements */
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body{
text-align: center;
margin: 0 auto;
height: auto;
font-family: Open Sans, sans-serif;
font-size: 1.4rem;
color: #000;
background-color: orange;
}
header{
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: center;
width: 95%;
height: 150px;
font-weight: bold;
text-align: left;
}
.logodiv {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
width: 45%;
height: auto;
}
.logo {
width: 30%;
height: auto;
}
.logo img {
width: 70%;
height: 100px;
}
.logotext {
display: flex;
flex-flow: row wrap;
justify-cintent: center;
align-content: center;
align-items: center;
width: 70%;
height: auto;
font-size: 5.0rem;
}
.logotext1 {
display: block; /* VITAL for Safari & Edge */
width: 100%;
height: 80px;
line-height: 1.0;
font: Lora;
color: red;
background-image: -webkit-linear-gradient(45deg, purple, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logotext2 {
display: block; /* VITAL for Safari/Edge */
width: 100%;
height: 35px;
line-height: 1.0;
font-size: 3.0rem;
font-style: italic;
letter-spacing: 0.3rem;
background-image: -webkit-linear-gradient(45deg, #111B61, #C8A2C8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
nav{
display: block;
width: 55%;
}
.navbar{
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;
align-content: center;
width: 100%;
height: 40px;
list-style-type: none;
text-align: justify;
font-size: 14px;
margin: 0;
padding: 0;
font-weight: bold;
color: #FFFFFF;
}
nav li {
position: relative;
width: auto;
height: 40px;
margin-left: 15%;
cursor: pointer;
}
nav li::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
content: '';
height: 2px;
width: 0;
background-color: #00FFFF;
opacity: 1;
transition: height 1300ms, opacity 1300ms, width 1300ms;
}
nav li:not(.on):hover::after {
width: 100%;
height: 2px;
opacity: 1;
}
.on::after {
text-decoration: none !important;
cursor: none;
}
.on::after{
width: 100%;
height: 2px;
opacity: 1;
}
.on {
cursor: none;
pointer-effects: none;
}
article{
width: 95%;
margin: 0 auto;
}
.band{
height: 800px;
font-weight: 600;
font-size: 4rem;
color: gold;
text-align: center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.hidden{
display: none;
}
.redpage{
background-color: #FF0000;
}
.whitepage{
background-color: #FFFFFF;
}
.bluepage{
background-color: #0000FF;
}
footer{
margin: 0 auto;
width: 95%;
text-align: center;
height: auto;
background: #000;
}
.foot-cont{
height: 100px;
font-size: 1.4rem;
font-style: italic;
color: #FFF;
display: flex; /* Important here, heh-heh */
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
JS
const PAGE = ( () =>
{
const switchPage = (pagelink) =>
{
const onLink = document.getElementsByClassName("on")[0]; // Find current nav link element
const oldPageId = (onLink.id).substring(0, // Get id of corresponding page ...
(onLink.id).length - 4) + "page"; // ... by replace "link" with "page"
const newPageLink = document.getElementById(pagelink); // Find new nav link, i.e. link clicked on
const newPageId = (newPageLink.id).substring(0,
(newPageLink.id).length - 4) + "page"; // Deduce id of corresponding page
if (oldPageId != newPageId) // Only reload when clicking on different page
{
onLink.classList.remove("on"); // Remove active status from old nav link
newPageLink.classList.add("on"); // Show new nav link as active page
document.getElementById(oldPageId).classList.add("hidden"); // Hide old page content
document.getElementById(newPageId).classList.remove("hidden"); // Display current page content
}
}
return { switchPage: switchPage };
}) ();
flex or inline-flex are the problems.
Text gradient is not working when you are using flex elements.
Instead: using block or inline-block.
Sorry, I am using TailwindCSS for a long time.