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>
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 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>
HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
display:flex;
justify-content: center;
align-items: center;
}
.container {
background-color: green;
border:1px solid black;
width:80vw;
height:80vh;
}
In the above code I am trying to align my div content to display in the center but it is not displaying what changes should I make to do so.
You forgot to add height for the body.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
This will solve your issue.
If you want to use the same flex command you must add a height property.
For example:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
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>
I'm developing a web UI that currently has a blue banner. However, when I try to modify its size in the CSS chunk below, it doesn't update. Before, in the code below, background-size was set to cover, but I need the height of the banner to shrink.
#header {
background-color: #04f;
color: rgba(255, 255, 255, 0.75);
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 8em 0 6em 0;
background-size: 20px 20px;
background-position: center top;
background-attachment: fixed;
text-align: center;
position: relative;
cursor: default;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Author Script by SANDERS</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="static/main.css?version=1" />
</head>
<body>
<!-- Header -->
<header id="header" class="alt">
<div class="inner">
<h1>Sanders Author Script</h1>
<p>A free author formatting script by Stephan J. Sanders</p>
</div>
</header>
</body>
</html>
You can add height property to the css ID.
#header {
background-color: #04f;
height : 500px;
width : 100%;
}