margin: auto; doesn't center div vertically [duplicate] - html

This question already has answers here:
Why doesn't "margin: auto" center an element vertically?
(5 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I want to center the text of my anchors (both horizontally and vertically) within their li container.
I've read that I can trivially center them orizzontally by using text-align: center; on the container.
But to center them vertically I would need to display li as a table and a as a table cell.
I didn't like this method so I put the text of the anchor into a div and tried to center the div with margin: auto;. For some reason this works only horizontally, even though the div is a block element with a defined height. Anyone knows the reason why?
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: block;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 7em;
height: 3em;
color: goldenrod;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><div>Menu</div></li>
<li><div>News</div></li>
<li><div>About</div>
<li><div>Contact</div></li>
</ul>
</nav>
</header>
</body>
</html>

You can use a flexbox again - like you did with the ul!
Display .nav ul li a as a flexbox, then use align-items: center;, to vertically center your link.
Your fixed code:
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: flex;
align-items:center;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 7em;
height: 3em;
color: goldenrod;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><div>Menu</div></li>
<li><div>News</div></li>
<li><div>About</div>
<li><div>Contact</div></li>
</ul>
</nav>
</header>
</body>
</html>

Another option is to remove the absolute height and width of the links and use padding instead.
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: block;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
color: goldenrod;
padding: .75em 2em;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><div>Menu</div></li>
<li><div>News</div></li>
<li><div>About</div>
<li><div>Contact</div></li>
</ul>
</nav>
</header>
</body>
</html>

Related

Nav Bar Text aligned on left

I have finally achieved making a nav bar with text aligned left with small spaces between. I think using flex items is not the best way. Please show me how to align the nav bar with spaces between on the left
<link rel="stylesheet" href="styles.css" type="text/css">
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
I assume your navbar has links so the best semantic tag for the link is <a>.
If you put <a> instead of <p> you don't need to add flexbox styling as a is an inline element.
* {
margin: 0%;
padding: 0%;
}
.container {
border: solid black 1px;
background-color: aqua;
color: blue;
padding: 12px;
}
.container a {
text-decoration: none;
margin: 0 4px;
}
<nav class="container">
<a class="item1" href="page1">Events</a>
<a class="item2" href="page2">Results</a>
<a class="item3" href="page3">Partnering Restaurants</a>
</nav>
Is this what you are looking for?
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
nav p {
padding: 0 10px;
}
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
Since nav have links, use <a> instead of <p>. So you nav markup should be something similar to this:
<nav class="container">
<a class="item1" href="#">Events</a>
<a class="item2" href="#">Results</a>
<a class="item3" href="#">Partnering Restaurants</a>
</nav>
please clear your question
but here is solution i find
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
</html>
here is css
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
padding: 10px 2%;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.container > *{
width: auto;
padding-right: 5%;
}
what i changes i maked
padding on top and bottom
no need of this
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
use this >*
here is the sample

Flex-Direction: Column; not working in a #media style rule

Bear with me here since I'm still learning how to code fully. I'm trying to write a code that, on desktop, will display a navigational bar on the right side of the screen. When displayed on something smaller than 800px, however, I want it displayed as a column instead of a row. Whenever I try setting this up though, it only displays in a row and won't turn to a column form below 800px.
Any and all help is appreciated!
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>
You need to add display:flex and flex-direction:column to your nav element to display a elements in column.
So if your div have only one child it's normal to see any changes except if you look at the main axis ( https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction )
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
So you can remove all flexbox's properties in div's media query and set navbar location using justify-content ( for the horizontal axis ) or align-items ( for vertical axis ). Make sure you have a large enough container if you want to move your navbar on the vertical axis.
If you have properties defined outside of your media queries you don't need to rewrite them. Media queries are just a sort overwriting system which depend on media. ( screen size usually )
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
justify-content:center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
}
nav{
display:flex;
flex-direction:column;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>
you need to turn a tag to block from default inline
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
display:block /* added this rule */
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>

<a> Tag in HTML with a height of 40px has the text floating in the top, not in the center

I'm trying to get a navigation bar to work. I have <a> tags in <p> tags, I want the <a> tags to be taking up the entire width of the navigation bar, in a way that it is clickable in all the vertical space of that specific element.
My Code:
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
}
.navlink {
margin: auto 10px;
height: 40px;
text-align: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
But my problem is that the text inside the a tag isn't vertically centered. I can't put it down with
transform: translateY(), as that would offset the link way too low.
I am really new to both CSS and HTML, so don't judge me if I don't have the most efficient code, or not the best way of doing something.
How do I get this to center align vertically? And if my code is bad, I would appreciate it if any improvements could be suggested.
Instead of implicitly defining the height of the links, use padding to get the desired height:
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
position: relative;
}
.flexmaker {
display: flex;
}
.navlink {
padding:16px 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
align-items: center;
}
.navlink {
margin: auto 10px;
height: 40px;
display: flex;
justify-content: flex-start;
align-items: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
Add 'align-items: center;' to '.flexmaker'
And navlink stay clear.
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
align-items: center;
}
.navlink {
margin: auto 10px;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
update your css code to this for center align vertical.
* {
margin: 0;
padding: 0;
}
#navbar {
background-color: dodgerblue;
height: 50px;
position: relative;
}
.navlink {
margin: auto 10px;
text-align: center;
position: absolute;
top: 50%;
left: 0%;
transform: translate(0%,-50%);
}
for both horizontal and vertical center change left to 50% and translate(-50%, -50%).

CSS Flex footer with 3 items, 2 at the start and the last one perfectly centered [duplicate]

This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 4 years ago.
I'm trying to create a footer using CSS flex, with the following conditions :
3 elements (links)
the first 2 must be at the left of the screen
the last one must be perfectly centered
Live snippet
* {
box-sizing: border-box;
text-decoration: none;
}
html, body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
width: 100%;
height: 100%;
display: flex;
flex: 1;
}
footer {
background: black;
}
a {
color: inherit;
}
ul {
margin: 0;
display: flex;
height: 66px;
list-style: none;
align-items: center;
justify-content: center;
}
li {
flex: 1;
color: white;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
li div {
padding: 1em;
}
li.centered {
justify-content: center;
}
li.centered div {
background: lightgrey;
color: black;
height: 100%;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<main></main>
<footer>
<ul>
<li>
<div>
First
</div>
<div>
Second, large, full of text element
</div>
</li>
<li class="centered">
<div>
Centered element
</div>
</li>
<li></li>
</ul>
</footer>
</body>
</html>
This is working fine, but I dislike the last empty li element (use to add a 3rd columns).
Does anyone have a solution for this, without an empty element in dom ?
This is working fine, but I dislike the last empty li element (use to add a 3rd columns).
Does anyone have a solution for this, without an empty element in dom ?
You can easily replace it with a pseudo element (ul:after) - you just need to make sure that you apply the style you have for li for that one as well then.
* {
box-sizing: border-box;
text-decoration: none;
}
html, body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
background: black;
}
a {
color: inherit;
}
ul {
margin: 0;
display: flex;
height: 66px;
list-style: none;
align-items: center;
justify-content: center;
}
/* pseudo element to replace empty LI at the end */
ul:after {
content: ""; /* content property needs to be set, otherwise pseudo element is not rendered at all */
}
/* apply general LI formatting for pseudo element as well */
li, ul:after {
flex: 1;
color: white;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
li div {
padding: 1em;
}
li.centered {
justify-content: center;
}
li.centered div {
background: lightgrey;
color: black;
height: 100%;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
<footer>
<ul>
<li>
<div>
First
</div>
<div>
Second, large, full of text element
</div>
</li>
<li class="centered">
<div>
Centered element
</div>
</li>
</ul>
</footer>
You can achieve that by using:
li.centered div {
position: relative;
left: 0;
right: 0;
transform: translateX(-50%);
}
I am aware that is not the most modern solution and I didn't use the flexbox but you don't need to create empty elements in this way.

Why do the navigation borders ignore my anchor tags when I reduce screen width?

I'm just building a mini test project in an online HTML/CSS course I'm doing for beginners and I don't understand why my navbar content doesn't respond to screen width. The header border goes right through my content if you keep reducing screen width (I've left borders on so you can see that happening).
I have copied my code and the course instructor's code below so that so you guys can tell me why his works but mine doesn't. The only major difference I see is that I used anchor tags whereas he used button tags for navigation but I still don't get why that is a problem (I set my anchor tags to display:block; in case their inline display was the issue).
My code:
/*mycss.css*/
* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
header {
border: 1px solid hotpink;
height: 100vh;
width: 10vw;
display: flex;
flex-direction: column;
justify-content: space-around;
border-right: 1px solid #D7DBDD;
}
div#top-nav {
border: 5px solid green;
height: 25%;
width: 100%;
display: flex;
flex-direction: column;
}
ul {
border: 1px solid gold;
list-style-type: none;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
li {
border: 1px solid red;
width: 100%;
/* text-align: center; */
}
li a {
border: 1px solid blue;
display: block;
padding: 20px 0 20px 20px;
text-decoration: none;
color: #16A2D7;
font-size: font-size: 2vw;
}
li a:hover {
background-color: #EEF3F5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<header>
<div id="top-nav">
<ul>
<li>Inbox</li>
<li>Contact</li>
<li>Accounts</li>
</ul>
</div>
<div>
<ul>
<li>Legal</li>
</ul>
</div>
</header>
</body>
</html>
Instructor's code:
/*main.css*/
html,
body,
div,
nav,
button {
padding: 0;
border: 0;
margin: 0;
box-sizing: border-box;
}
html {
color: #16A2D7;
font-size: 2vw;
}
#sidebar {
height: 100vh;
/* arrange child elements */
display: flex;
flex-direction: column;
justify-content: space-between;
/* format */
border-right: 1px solid #D7DBDD;
width: fit-content;
/*the width*/
}
.sidebar-child {
/* arrange child elements */
display: flex;
flex-direction: column;
}
.sbc-top {
/* format */
padding-top: 2rem;
}
.sbc-btm {
padding-bottom: 2rem;
}
button {
/* format */
color: inherit;
background-color: white;
font-size: 1rem;
height: 3rem;
width: 10rem;
/*the width*/
text-align: left;
padding-left: 2rem;
cursor: pointer;
}
button:hover {
background-color: #EEF3F5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<!--<link rel="stylesheet" href="main.css">-->
</head>
<body>
<div id="sidebar">
<nav class="sidebar-child sbc-top">
<button>Inbox</button>
<button>Contact</button>
<button>Accounts</button>
</nav>
<div class="sidebar-child sbc-btm">
<button>Legal</button>
</div>
</div>
</body>
</html>
The chief thing that is causing you issues is this rule:
header {
width: 10vw;
}
This means, no matter what, make my <header> have width equal to 10% of the width of the viewport. This doesn't account for size of the content within. Take a look at your professor's rule for the #sidebar, it uses width: fit-content which doesn't limit the size of the container.
An additional issue is that you are using:
li a {
display: block;
}
Which means the <a> are going to try and eat as much space as they. Normally, they are inline which causes them not to try to fill out width. Depending on what presentation you are trying to make, you should remove the width: 10vw; and the display: block; to start.