Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1464

`` breaks `justify-content: center` in the body tag

$
0
0

for some reason adding <!DOCTYPE html> breaks justify-content: center in the body tag. It's like a container without a doctype takes all the space it has, and with it only a part of it.

body{    background-color: rgb(249, 249, 249);    font-family: "Segoe UI",Helvetica,Arial,sans-serif;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;}/* containers */.container{    display: flex;    flex-direction: column;    justify-content: center;}.login-container{    text-align: center;    border: solid 1px lightgray;    background-color: white;    width: 350px;    min-height: 395px;}.registration-container{    display: flex;    justify-content: center;    align-items: center;    border: solid 1px lightgray;    background-color: white;    width: 350px;    min-height: 60px;    margin: 10px 0;    color: rgb(40, 40, 40);    font-size: 14px;}/* login-container */.logo-insta{    margin: 45px 0px 30px 0px;}.input-container{    display: flex;    flex-direction: column;    align-items: center;    margin: 0 20px;}.log-insta, .input-box{    display: block;    background-color: rgb(249, 249, 249);    border: solid 1px lightgray;    border-radius: 4px;    width: 270px;    margin: 3px;    padding: 11px 8px;    font-size: 12px;}.login-button{    width: 270px;    margin: 10px;    color: white;    font-weight: bold;    font-size: 15px;    background-color: rgb(0, 145, 255);    border: none;    border-radius: 4px;    padding: 6px;}.or-container{    color: gray;    position: relative;    margin: 10px 0;}hr{    color: rgb(228, 227, 227);    border-top: solid 1px;    width: 270px;}.or{    font-size: 14px;    font-weight: 600;    color: rgb(161, 161, 161);    background-color: white;    padding: 0 20px;    position: absolute;    top: -5px;    left: 140px;}.login-facebook{    display: flex;    justify-content: center;    color: rgb(25, 66, 131);    font-size: 14px;    font-weight: bold;    margin-top: 42px;    margin-bottom: 23px;}.login-facebook-img{    width: 16px;    height: 16px;    margin-right: 8px;}.forget-password{    color: rgb(25, 66, 131);    font-size: 13px;}/* registration container */.registration-text{    color: rgb(0, 145, 255);    font-weight: bold;    margin-left: 4px;}/* install app */.download-app-text{    font-size: 14px;    text-align: center;    margin-top: 12px;}.download-app-container{    display: flex;    flex-direction: row;    justify-content: center;}.download-app-img{    width: 140px;    margin: 20px 4px;}/* Hover */.login-button:hover,.login-facebook:hover,.forget-password:hover,.registration-text:hover,.download-app-img:hover{    cursor: pointer;}/* Active */.login-button:active,.login-facebook:active,.forget-password:active,.registration-text:active,.download-app-img:active{    opacity: 0.7;}
<!DOCTYPE html><html lang="ru"><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="/login.css"><title>Instagram</title></head><body><div class="container"><div class="login-container"><img class="logo-insta" src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png"><div class="input-container"><input class="input-box" type="email" placeholder="Телефон, имяпользователяилиэл. адрес"><input class= "input-box" type="password" placeholder="Пароль"></div><button class="login-button">Войти</button><div class="or-container"><hr/><div class="or">ИЛИ</div></div><div class="login-facebook"><img class="login-facebook-img" src="/login-imgs/login-facebook.jpg"><div>Войтичерез Facebook</div></div><div class="forget-password">Забылипароль?</div></div><div class="registration-container"><div>Увасещёнетаккаунта?</div><div class="registration-text">Зарегестрироваться</div></div><div class="download-app-text">Установитеприложение.</div><div class="download-app-container"><img class="download-app-img" src="https://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/180ae7a0bcf7.png"><img class="download-app-img" src="https://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/e9cd846dc748.png"></div></div></body></html>

Viewing all articles
Browse latest Browse all 1464

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>