This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
I'm trying to center the below HTML vertically and horizontally but it's not working vertically, only horizontally. Please could someone help explain why it's not working?
<body>
<header class="nav">
<img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
<a class="home-anchor" href="./index.html">Learn</a>
</header>
<div class="quiz-container">
<p class="word-to-conjugate" id="randomWord"></p>
<input type="text" id="userGuess">
<button class="answer-button" id="checkAnswer">Answer</button>
</div>
</body>
My CSS using flexbox trying to center the quiz horizontally and vertically
.quiz-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.word-to-conjugate {
font-size: 2rem;
font-family: 'Source Sans Pro', sans-serif;
text-align: center;
}
input {
font-family: 'Roboto', sans-serif;
font-weight: bold;
padding: 10px;
font-size: 1.5rem;
border: 1px solid #333;
border-radius: 5px;
margin-bottom: 20px;
}
.answer-button {
background-color: #505FDF;
font-size: 1.5rem;
text-align: center;
color: #FFFFFF;
padding: 10px;
border-radius: 5px;
border: none;
font-family: 'Roboto', sans-serif;
margin-bottom: 3%;
}
That's because you have nothing making the quiz-container aligning vertically.
See example below, trick is to add a wrapper around your quiz element which aligns it vertically. Lastly, be sure to set the height of html, body and wrapper element to 100%;
html,
body,
.wrapper {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.quiz-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.word-to-conjugate {
font-size: 2rem;
font-family: 'Source Sans Pro', sans-serif;
text-align: center;
}
input {
font-family: 'Roboto', sans-serif;
font-weight: bold;
padding: 10px;
font-size: 1.5rem;
border: 1px solid #333;
border-radius: 5px;
margin-bottom: 20px;
}
.answer-button {
background-color: #505FDF;
font-size: 1.5rem;
text-align: center;
color: #FFFFFF;
padding: 10px;
border-radius: 5px;
border: none;
font-family: 'Roboto', sans-serif;
margin-bottom: 3%;
}
<body>
<header class="nav">
<img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
<a class="home-anchor" href="./index.html">Learn</a>
</header>
<div class="wrapper">
<div class="quiz-container">
<p class="word-to-conjugate" id="randomWord"></p>
<input type="text" id="userGuess">
<button class="answer-button" id="checkAnswer">Answer</button>
</div>
</div>
</body>
p, input, button are already centered with respect to their parent: .quiz-container
Maybe you are looking for it to be centered with respect to the complete screen/viewport. In that case you need to set the min-height of html, body and quiz-container to 100%.
Now .quizcontainer has 100% height and its children will be centered
both vertically and horizontally.
body, html{
min-height: 100%; /*add this*/
}
.quiz-container {
min-height: 100%; /*add this*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.word-to-conjugate {
font-size: 2rem;
font-family: 'Source Sans Pro', sans-serif;
text-align: center;
}
input {
font-family: 'Roboto', sans-serif;
font-weight: bold;
padding: 10px;
font-size: 1.5rem;
border: 1px solid #333;
border-radius: 5px;
margin-bottom: 20px;
}
.answer-button {
background-color: #505FDF;
font-size: 1.5rem;
text-align: center;
color: #FFFFFF;
padding: 10px;
border-radius: 5px;
border: none;
font-family: 'Roboto', sans-serif;
margin-bottom: 3%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header class="nav">
<img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
<a class="home-anchor" href="./index.html">Learn</a>
</header>
<div class="quiz-container">
<p class="word-to-conjugate" id="randomWord"></p>
<input type="text" id="userGuess">
<button class="answer-button" id="checkAnswer">Answer</button>
</div>
</body>
</html>
Related
Hello, I created a site but I have a problem with my buttons I think
it comes largely from the fact that I use <a> tags (impossible for
me to create from scratch starting from a tag If someone can
explain to me this way of doing things I'm interested because I've
tried many times and it's impossible for me now
I want this style of button : 1) Invite & Support button: https://i.imgur.com/U4wF4H7.png 2) Login Button in the header section:
https://i.imgur.com/rajn8eU.png But i have this style actually :
https://i.imgur.com/xbDuOe3.png
```<!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">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
</div>
<div class="login">
Login
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
Invite
Support
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add function js -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>```
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.header_btn {
display: flex;
justify-content: space-evenly;
}
.invite_btn {
display: flex;
justify-content: center;
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
display: flex;
justify-content: center;
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
padding: 8px 0px 0px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
To train myself, I decided to reproduce this website:
https://hydra.bot/ this project taught me many things despite the fact
that my current project does not correspond to 100% (Very complex for
me to reproduce it to 100% currently), I block especially on the
buttons, so if someone can help me I'm interested, thank you in
advance
You need to wrap your invite and support button in another div that has display flex property.
If you make display flex it is not going to do anything to itself, rather it modifies its child components
.container {
display: flex;
justify-content: center;
}
<div class='container'>
Invite
Support
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
picture of the questionmark next to the text
(can't post pictures yet)
the questionmark is a bit lower than the "Status Update" text and I want to align it, but i don't know how.
The css and html is here:
.qmarkCircle {
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
&:hover,
&:after{
content: "?" !important;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
hope this is enough
flex or grid might help :
here is a flex example:
.qmarkCircle {
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
}
.qmarkCircle:hover:after {
content: "?" !important;
}
header {
display: flex;
height: 100vh;
background: gray;
align-items: center;
justify-content: center;
}
body {
margin: 0;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
h3 and div are not inline elements by default. So, first you need to make them inline, then any stylings will work on it.
h3 {
display: inline;
}
.qmarkCircle {
display: inline;
vertical-align: middle;
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
&:hover,
&:after{
content: "?" !important;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
SOLUTION WITHOUT USING FLEX:
Use this code for all the elements you want to align parallell:
display: inline-block;
vertical-align: middle;
I am having difficult to style the elements inside a div in vertically aligned position.
Here is the snippet. I am kind new to CSS flexbox.
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container {
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800;
line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width: 400px;
height: auto;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div><span class="framework_rating">3</span>React</div>
<div><span class="framework_rating">6</span>Blazor</div>
<div><span class="framework_rating">2</span>Knockout.js</div>
</div>
</div>
As you see the rating and name should be on the same line. I would appreciate any help.
A simple solution is to put a class for the div wrapping the elements that you want in the same line:
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container{
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800; line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width:400px;
height:auto;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 25%;
}
<body>
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div class="wrapper"><span class="framework_rating" >3</span>React</div>
<div class="wrapper"><span class="framework_rating" >6</span>Blazor</div>
<div class="wrapper"><span class="framework_rating" >2</span>Knockout.js</div>
</div>
</div>
</body>
Hope this helps. Best Regards.
you need to add this css on div of frameworks-wrapper id.
you can used flexbox here, which gives you flex layout
#frameworks-wrapper>div{
display: flex;
}
For more referance please check this flexbox guide
You just need to add css on the div inside your wrapper:
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container{
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800; line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width:400px;
height:auto;
}
#frameworks-wrapper>div{
width: 100px;
display: flex;
justify-content: space-between;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
<body>
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div><span class="framework_rating" >3</span>React</div>
<div><span class="framework_rating" >6</span>Blazor</div>
<div><span class="framework_rating" >2</span>Knockout.js</div>
</div>
</div>
</body>
I got it this far:
Jsfiddle
How can I change the css of the span so it's vertically centered to the h1 on the left of it?
Hope it's not to complicated!
Your best bet is using Flex styles.
Remove all styles for '.title i', '.title span', '.title h1'
Edit title as below:
Flex title style:
.title {
width: 100%;
margin: 30px auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
justify-content: center; - This re-aligns your H1, dash, and span in the middle.
align-items: center; - This gives you that vertical alignment.
Add a wrapper around h1 and span, then set it as a inline-flex. The wrapper will be centered because of the text-align with title.
Fiddle
.title {
width: 100%;
margin: 30px auto;
text-align: center;
}
.wrapper {
display: inline-flex;
justify-content: flex-start;
align-items: center;
}
.title i {
color: var(--grey-500);
}
.title span {
font-size: var(--caption);
line-height: 40px;
color: #9E9E9E;
}
.title h1 {
color: var(--black);
font-size: var(--h1);
text-align: center;
font-weight: 500;
margin: 65px auto;
}
<div class="title">
<div class="wrapper">
<h1>Title 1</h1> <i class="material-icons separateTitleType">remove</i> <span>Page</span>
</div>
</div>
Add this code to .title
display: flex;
justify-content:center;
align-items:center;
Also, i removed margin: 65px auto from h1 so it wouldn't take all the place in flex-container.
/* Titles */
.title {
width: 100%;
margin: 30px auto;
text-align: center;
display: flex;
justify-content:center;
align-items:center;
}
.title i {
color: var(--grey-500);
}
.title span {
font-size: var(--caption);
line-height: 40px;
color: #9E9E9E;
}
.title h1 {
color: var(--black);
font-size: var(--h1);
text-align: center;
font-weight: 500;
}
:root {
--black: #000000;
--h1: 2.125em;
--caption: 0.875em;
--grey-500: #9E9E9E;
}
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #fff;
}
<div class="title">
<h1>Title 1</h1> <i class="material-icons separateTitleType">remove</i> <span>Page</span>
</div>
I am using LESS (CSS) trying to align a span (button text) inside a div (button). The span is centrally aligned horizontally but is top aligned vertically. I would also like the span object to adjust itself to the text size automatically.
Here's the LESS code:
.button(#color:#crimson-red) {
border-radius: #small-border-radius;
border-style: none;
background-color: #color;
text-align: center;
display: inline-block;
}
.button-font {
vertical-align: middle;
overflow: auto;
font-family: "Helvetica Neue", sans-serif;
color: #off-white;
font-weight: bold;
font-size: 10pt;
position: relative;
}
.blue-button {
.button(#blue);
}
You can achieve this by using the flexbox layout.
So by adding the following properties and values to the .button selector you can center the span.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
Here is the full less file for reference.
#off-white: #fefefe;
#blue: #4286f4;
#small-border-radius: 5px;
.button(#color:#crimson-red) {
border-radius: #small-border-radius;
border-style: none;
background-color: #color;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button-font {
font-family: "Helvetica Neue", sans-serif;
color: #off-white;
font-weight: bold;
font-size: 10pt;
position: relative;
}
.blue-button {
.button(#blue);
width: 300px;
height: 100px;
}
This would be the html:
<button class="blue-button">
<span class="button-font">Hello, lots of text here</span>
</button>
Here is a link to a JSFiddle with compiled css.