I am trying to center the text(Tickle) vertically between the empty space that have left, Can you suggest me something that I should do in case.
The "show" Button should always stay in bottom.
And the text(Tickle) should be between "Search" button and the "Show" button.
body {
margin: 0;
}
.level-buttons {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.level-button {
padding: 10px 20px;
}
.search-button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#search-button {
padding: 10px 40%;
}
.show-button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#show-button {
position:absolute;
bottom: 5%;
padding: 10px 40%;
}
.word {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.word-text {
color: rgb(0, 94, 0);
font-size: 32px;
}
<!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="/css/style.css">
<link rel="stylesheet" href="/css/semantic.min.css">
<title>Learn Vocabulary</title>
</head>
<body>
<div class="level-buttons">
<button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button">L1</button>
<button onclick="changeLevel(2)" class="level-button ui basic button level-2-button">L2</button>
<button onclick="changeLevel(3)" class="level-button ui basic button level-3-button">L3</button>
<button onclick="changeLevel(4)" class="level-button ui basic button level-4-button">L4</button>
<button onclick="changeLevel(5)" class="level-button ui basic button level-5-button">L5</button>
</div>
<div class="search-button">
<button class="ui basic purple button" id="search-button">Search</button>
</div>
<div class="word">
<span class="word-text">Tickle</span>
</div>
<div class="show-button">
<button class="ui black basic button" id="show-button">Show</button>
</div>
<script src="/js/home.js"></script>
</body>
</html>
I do not have Computer Science background, this small app is intended for mobile. I appreciate your any help.
Thank you.
To achieve this update your HTML with following code
<div class="flex-box">
<div>
<div class="level-buttons">
<button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button">L1</button>
<button onclick="changeLevel(2)" class="level-button ui basic button level-2-button">L2</button>
<button onclick="changeLevel(3)" class="level-button ui basic button level-3-button">L3</button>
<button onclick="changeLevel(4)" class="level-button ui basic button level-4-button">L4</button>
<button onclick="changeLevel(5)" class="level-button ui basic button level-5-button">L5</button>
</div>
<div class="search-button">
<button class="ui basic purple button" id="search-button">Search</button>
</div>
</div>
<div class="word">
<span class="word-text">Tickle</span>
</div>
<div class="show-button">
<button class="ui black basic button" id="show-button">Show</button>
</div>
</div>
and your CSS with following
body {
margin: 0;
}
.flex-box{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-between;
}
.level-buttons {
margin: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.level-button {
padding: 10px 20px;
}
.search-button {
margin: 20px ;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#search-button {
padding: 10px 40%;
}
.show-button {
margin: 20px ;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#show-button {
padding: 10px 40%;
}
.word {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.word-text {
color: rgb(0, 94, 0);
font-size: 32px;
}
Enjoy!
This should work.
body {
margin: 0;
}
.level-buttons {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.level-button {
padding: 10px 20px;
}
.search-button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#search-button {
padding: 10px 40%;
}
.show-button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#show-button {
position:absolute;
bottom: 5%;
padding: 10px 40%;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
section {
color: rgb(0, 94, 0);
font-size: 32px;
margin: 0;
position: absolute;
top: 50%;
}
<!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="/css/style.css">
<link rel="stylesheet" href="/css/semantic.min.css">
<title>Learn Vocabulary</title>
</head>
<body>
<div class="level-buttons">
<button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button">L1</button>
<button onclick="changeLevel(2)" class="level-button ui basic button level-2-button">L2</button>
<button onclick="changeLevel(3)" class="level-button ui basic button level-3-button">L3</button>
<button onclick="changeLevel(4)" class="level-button ui basic button level-4-button">L4</button>
<button onclick="changeLevel(5)" class="level-button ui basic button level-5-button">L5</button>
</div>
<div class="search-button">
<button class="ui basic purple button" id="search-button">Search</button>
</div>
<div class="center-screen">
<section>
<div>Tickle</div>
</section>
</div>
<div class="show-button">
<button class="ui black basic button" id="show-button">Show</button>
</div>
<script src="/js/home.js"></script>
</body>
</html>
Result
Add this style to your .word class
.word {
margin-top:50%;
}
Try out this solution!
Wrap them in a new div and make it as flex-box.
Refactor some of the duplicate code just like bellow.
body {
margin: 0;
}
.level-buttons {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.level-button {
padding: 10px 20px;
}
.button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#show-button, #search-button {
position:absolute;
padding: 10px 40%;
}
.word {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.word-text {
color: rgb(0, 94, 0);
font-size: 32px;
}
.control-button {
display: flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
height: 100vh;
}
<!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="/css/style.css">
<link rel="stylesheet" href="/css/semantic.min.css">
<title>Learn Vocabulary</title>
</head>
<body>
<div class="level-buttons">
<button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button">L1</button>
<button onclick="changeLevel(2)" class="level-button ui basic button level-2-button">L2</button>
<button onclick="changeLevel(3)" class="level-button ui basic button level-3-button">L3</button>
<button onclick="changeLevel(4)" class="level-button ui basic button level-4-button">L4</button>
<button onclick="changeLevel(5)" class="level-button ui basic button level-5-button">L5</button>
</div>
<div class="control-button">
<div class="button">
<button class="ui basic purple button" id="search-button">Search</button>
</div>
<div class="word">
<span class="word-text">Tickle</span>
</div>
<div class="button">
<button class="ui black basic button" id="show-button">Show</button>
</div>
</div>
<script src="/js/home.js"></script>
</body>
</html>
Related
I am using display: flex for a page with a header, main, and footer. The issue I am running into is that the main is not vertically centered and is lower than I'd want it to be. I can't seem to figure out the best way to go about this and I've messed with the padding and margin to align it, however is there a better way?
body {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.header-main {
width: 100%;
display: inline-flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.footer-main {
width: 100%;
text-align: center;
min-height: 50px;
}
.error-wrapper {
text-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header class="header-main">
<h1 class="header-title">TITLE</h1>
<ul class="header-elements">
<li>
ABOUT
</li>
</ul>
</header>
<main class="error-wrapper">
<p id="error-segment">404</p>
<h1 id="message-segment">PAGE NOT FOUND</h1>
</main>
<footer class="footer-main">
<p class="footer-text">footer</p>
</footer>
</body>
</html>
I fail to get the image (logo) in the center of the top bar!! I tried everything, I used align-self: center; , display:block; but no luck!! I don't know what i'm missing here!
codesandbox Link to the code for better viewing
The code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<style>
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer{
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
}
.logo-image {
width: 20%;
height: 10%;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img
src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
class="logo-image"
/>
</a>
</div>
</header>
</div>
</body>
</html>
Add the following CSS:
.logo-image-cont {
display: flex;
justify-content: center;
}
See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Tajawal:wght#200;300;400;500;700;800;900&display=swap');
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer {
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont {
display: flex;
justify-content: center;
}
.logo-image {
width: 20%;
height: 10%;
}
.emailSection {
display: flex;
justify-content: center;
align-self: center;
align-content: center;
font-family: 'Tajawal', sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img src="https://i.ibb.co/jwjBMnS/Kia-logo.png" class="logo-image">
</div>
</header>
<section class="emailSection" id="sec-3cf1">
<div>
</div>
</section>
<footer class="emailFooter">
<div class="footerCopyrightCont">
</div>
</footer>
</div>
</body>
</html>
Add
display: flex;
justify-content:center;
inside your logo-image-con div block
Link to corrected code
add text-align: center; to .logo-image-cont
Replace the css class with this
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
display: flex;
}
.logo-image {
width: 20%;
height: 10%;
margin: 0 auto;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<style>
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer{
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
display: flex;
}
.logo-image {
width: 20%;
height: 10%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img
src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
class="logo-image"
/>
</a>
</div>
</header>
</div>
</body>
</html>
I'm starting to learn web development from here.
Currently, I am working fidgeting around with the code shown below to understand flexbox better.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="container">
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</body>
</html>
Relevant CSS code:
body {
font-family: 'Open Sans', sans-serif;}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
flex-wrap:wrap;
}
#container div{
height:200px;
width: 200px;
}
The webpage looks like this:
I want to know how do I right or left align the main div in the background? Which style/command does one use for this?
EDIT: I know how to align the smaller squares present inside the div. I want to know how do I align the big blue-ish rectangle in the background of the containers to the right or the left. By default its centered. Apologies if that was not clear in the question before.
You have left and right margin defined at auto right now so it's currently centered. You can set margin-left: auto; for it to be right-aligned, and do the opposite for it to be left-aligned.
body {
font-family: 'Open Sans', sans-serif;}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin-left: auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
flex-wrap:wrap;
}
#container div{
height:200px;
width: 200px;
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="container">
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</body>
</html>
For left align align-items: flex-start; and
align-items: flex-end; for right align.
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/*right align*/
align-items: flex-end;
/*left align*/
/* align-items: flex-start; */
/* justify-content: flex-end; */
flex-wrap: wrap;
}
#container div {
height: 200px;
width: 200px;
}
Right align
if you want that the elements in your section get aligned to the right you should add :
align-items: flex-end;
your section css should be like so :
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
align-items: flex-end;
flex-wrap:wrap;
}
I have been trying to use a media query to resize some letters when the device or width of the browser screen changes.
I have checked the syntax and I have added on my main HTML:
<meta name="viewport"content="width=device-width, initial-scale=1"/> on my main HTML
The media query I am trying to implement is this one:
#media screen and(max-width:720px)and (max-device-width:720px){
.clock{
font-size: 0.5em;
}
}
If it matters I am developing on Angular 10 in a Mac and testing with Safari and Chrome on a Mac computer and iPhone XS.
app.component.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"/>
<!-- shrink-to-fit=no -->
<title>title</title>
</head>
<body class="mat-app-background">
<div class="page">
<h1>Clock</h1>
<div class="menu-container" >
<button mat-raised-button class="clock type1">World Clock</button>
<button mat-raised-button class="clock type2">Alarm</button>
<button mat-raised-button class="clock type3">Stopwatch</button>
<button mat-raised-button class="clock type4" (click)="myFunction('hello')">Timer</button>
</div>
<div class="content">
<!-- <div class="box"> box</div> -->
<app-timer>
</app-timer>
</div>
</div>
</body>
</html>
<router-outlet></router-outlet>
app.component.css
#import url('https://fonts.googleapis.com/css2?family=Karla&family=Montserrat:wght#500&display=swap');
h1{
text-align:center;
font-size: 6em;
font-family: 'Montserrat', sans-serif;
padding-top: 40px;
padding-bottom: 20px;
}
.page{
height: 100vh;
background-color: #f1eaea;
}
.menu-container{
height: 100px;
display: flex;
border: 0px solid black;
background-color: #f1eaea;
flex-direction: row;
align-items: center;
justify-content: center;
}
.clock{
display: flex;
text-align: center;
font-family: 'Karla', sans-serif;
color: white;
font-weight: 600;
font-size: 1.6em;
line-height: 1.4;
align-items: center;
justify-content: center;
height: 80%;
width: 10em;
margin: 6px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.80);
}
.type1{
background-color: #002642;
}
.type2{
background-color: #840032;
}
.type3{
background-color: #E59500;
}
.type4{
background-color: #2A9D8F;
}
.content{
display: flex;
flex-direction: row;
align-items: flex-start;
padding-top: 5vh;
justify-content: center;
height: calc(100vh - 265px);
}
.box{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 80%;
}
#media screen and(max-width:720px)and (max-device-width:720px){
.clock{
font-size: 0.5em;
}
}
Global css style.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
html {
min-height: 100%;
}
body{
min-height:100%;
height:100vh;
}
html, body { height: 100%; }
Is there a way to stop the span from going to a new line when the parent is flex-direction: column?
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">Taken with natural breathing
<span class="asterisk-weight-normal">*</span></h2>
<!--content-->
</div>
You can change the h2's display property to inline-block. It will work.
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<body>
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">
Taken with natural breathing
<span class="asterisk-weight-normal">*</span>
</h2>
<!--content-->
</div>
<script src="index.js"></script>
</body>
</body>
</html>
You should use display:contents
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.card-content-column__title .asterisk-weight-normal {
display: contents;
}
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">
Taken with natural breathing
<span class="asterisk-weight-normal">*</span>
<span>extra column</span>
<span>extra column</span>
</h2>
<!--content-->
</div>