This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How do I vertically align text in a div?
(34 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I'm practicing creating a website, and am currently trying to replicate this site. At the moment I am working on the navigation bar, but I am unable to vertically align the button vertically in the nav.
.header {
background-color: red;
padding: 40px 20px;
}
.header h1 {
background-color: yellow;
float: left;
}
.header h1 img {
display: block;
}
.header__nav {
background-color: aqua;
float: right;
}
.header__nav li {
float: left;
height: 38px;
}
.header__nav li a {
padding: 0 20px;
display: inline-block;
line-height: 38px;
}
.contents {
background-color: green;
}
.footer {
background-color: blue;
}
<header class="header clearfix">
<h1>
<img src="https://pixelicons.com/wp-content/themes/pexelicons/assets/pic/site-logo/logo.png" alt="Logo">
</h1>
<nav class="header__nav">
<ul class="clearfix">
<li>View icons</li>
<li>Buy now</li>
<li><button class="menu">menu</button></li>
</ul>
</nav>
</header>
<section class="contents">
contents
</section>
<footer class="footer">
footer
</footer>
My working image
I wanna align the top-right button of the nav bar vertically. I know this can be solved using display: flex;, but I wanna solve it another way. Is there a proper way to solve this issue?
Even though your solution using display: flexseems perfectly fine to me, you could fix it using vertical-align: middle; and display: inline-block on all of the items (the two links and the button)
.header {
background-color: red;
padding: 40px 20px;
}
.header h1 {
background-color: yellow;
float: left;
}
.header h1 img {
display: block;
}
.header__nav {
background-color: aqua;
float: right;
}
.header__nav li {
float: left;
height: 38px;
}
.header__nav li a {
padding: 0 20px;
display: inline-block;
<!-- Remove - line-height: 38px; -->
}
.contents {
background-color: green;
}
.footer {
background-color: blue;
}
<!-- new added class -->
.clearfix{
display: flex;
align-items: center;
}
<header class="header clearfix">
<h1>
<img src="https://pixelicons.com/wp-content/themes/pexelicons/assets/pic/site-logo/logo.png" alt="Logo">
</h1>
<nav class="header__nav">
<ul class="clearfix">
<li>View icons</li>
<li>Buy now</li>
<li><button class="menu">menu</button></li>
</ul>
</nav>
</header>
<section class="contents">
contents
</section>
<footer class="footer">
footer
</footer>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 17 days ago.
I am trying to make a simple top bar
as a way to put things I've been learning into practice so I'm not exactly looking for a work around as much as I am looking to understand what is happening and fixing it so I can apply my recently learned knowledge.
(sorry if this can come out as rude)
visually speaking it should be something like this:
||_______________________centered-title___________button1__button2||
but I am unable to center the title properly.
After I added the inline block to the centered title I am unable to move it from the left as text align stopped having a effect on it
here is my code
* {
margin: 0;
}
body {
background: rgb(15, 17, 26);
}
.logo {
text-align: center;
display: inline-block;
font-family: "Oswald";
line-height: 70px;
}
header {
background: gray ;
}
.contenedor {
overflow: hidden;
}
.derecha {
float: right;
}
header .contacto {
display: inline-block;
}
header .contacto ul {
list-style: none;
}
header .contacto ul li {
display: inline-block;
line-height: 70px;
}
<html>
<body>
<header class="contenedor">
<div class="logo">
<p>PAGE TITLE</p>
</div>
<div class="derecha">
<nav class="contacto">
<ul>
<li>SOCIALS 1</li>
<li>SOCIALS 2</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
When you change an element to inline-block it no longer occupies the full width of its container—-it becomes the width of its contents.
text-align ceases to have a visible effect because you’re “centering” it within an area that’s the same width as the content.
You can see this in the browser’s dev tools by inspecting the relevant element, or by placing a border on the element.
I’d strongly recommend you look into CSS flexbox and CSS grid for arranging elements in predictable ways.
Just use the flexbox model:
<header class="contenedor">
<div class="logo">
<p>PAGE TITLE</p>
</div>
<div class="title">
centered title
</div>
<div class="derecha">
<nav class="contacto">
<ul>
<li>SOCIALS 1</li>
<li>SOCIALS 2</li>
</ul>
</nav>
</div>
</header>
CSS:
* {
margin: 0;
}
body {
background: rgb(15, 17, 26);
}
.logo {
text-align: center;
font-family: "Oswald";
line-height: 70px;
}
header {
background: gray ;
}
.contenedor {
display: flex;
align-items: center;
}
.title {
flex-grow: 1;
text-align: center;
}
header .contacto {
display: inline-block;
}
header .contacto ul {
list-style: none;
}
header .contacto ul li {
display: inline-block;
line-height: 70px;
}
Welcome to stackoverflow #Aulmeies,
You should use either flex box or grid layout for header/nav bar, So it wil shrink to any device width and become responsive. Refer the changes i made.
MDN DOCS FOR FLEX
* {
margin: 0;
}
body {
background: rgb(15, 17, 26);
}
.logo {
text-align: center;
flex:1; /* it makes to occupy the larger with than other */
font-family: "Oswald";
line-height: 70px;
}
header {
background: gray ;
}
.contenedor {
overflow: hidden;
display:flex; /* flexbox layout */
}
.derecha {
/*float: right; */
}
header .contacto {
/*display: inline-block; */
height:100%;
}
header .contacto ul {
list-style: none;
height:100%;
display:flex;
gap:5px;
}
header .contacto ul li {
align-self:center;
padding:10px;
}
<html>
<head>
</head>
<body>
<header class="contenedor">
<div class="logo">
<p>PAGE TITLE</p>
</div>
<div class="derecha">
<nav class="contacto">
<ul>
<li>SOCIALS 1</li>
<li>SOCIALS 2</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Taking this example as starting point, I am trying to create a navigation bar with a left-aligned and a right-aligned section, ensuring vertical alignment into middle for all the elements inside it.
Unfortunately, the right part is not vertically centered, even if right-aligned and left-aligned classes have both the vertical-align: middle property set. What do I am missing? Here is the code bunch:
header img {
display: inline-block;
}
header nav {
display: inline-block;
font-size: 1em;
vertical-align: middle;
}
header nav ul {
padding: 0;
margin: 0;
}
header nav ul img {
vertical-align: middle;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
padding: .4em .8em;
font-size: 1em;
text-decoration: none;
color: black;
background: #eee;
line-height: 1;
}
header .container {
max-width: 800px;
margin: auto;
overflow: hidden;
}
.left-aligned {
float: left;
}
.right-aligned {
float: right;
}
<html>
<body>
<header role="banner">
<div class="container">
<div class="left-aligned">
<img class="left" src="http://placehold.it/200x200">
</div>
<div class="right-aligned">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://placehold.it/100x100">
About Us
</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
This is a great use case for flexbox - by adding the following three lines to your container class, you can achieve a left and right aligned section:
display: flex;
justify-content: space-between;
align-items: center;
So your final code will look like this (I've separated HTML and CSS for legibility):
header img {
display: inline-block;
}
header nav {
display: inline-block;
font-size: 1em;
}
header nav ul {
padding: 0;
margin: 0;
}
header nav ul img {
vertical-align: middle;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
padding: .4em .8em;
font-size: 1em;
text-decoration: none;
color: black;
background: #eee;
line-height: 1;
}
header .container {
max-width: 800px;
margin: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}
<header role="banner">
<div class="container">
<div class="left-aligned">
<img class="left" src="http://placehold.it/200x200">
</div>
<div class="right-aligned">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://placehold.it/100x100">
About Us
</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
This justifies the direct children of the flexbox to horizontally align left and right with space in between. If more than two elements were to exist, they would be placed with equal spacing across the width of the container.
Align items will determine the vertical alignment of elements inside the flexbox.
This is true when flex-direction is not set (default value - row). When flex-direction is set to column, the "axis" affected by justify and align are reversed.
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I created a nav bar but my border-bottom not working , it is working as a border-top instead. I am trying to create a nav bar like twitter for learning. It will be a great help if someone helps me to solve it
*{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: auto;
border-bottom: 1px solid #dae0e4;
}
.container{
width: 90%;
margin: 10px auto;
}
.main-nav{
width: 50%;
float: left;
}
.second-nav{
float: right;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
font-size: 120%;
}
li a {
color: #6f7d87;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.body{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="page">
<div class="header">
<div class="container">
<div class="main-nav">
<ul>
<li>Home</li>
<li>Notification</li>
<li>Messages</li>
</ul>
</div>
<div class="second-nav">
<ul>
<li>Search Bar</li>
<li>Profile</li>
<li>Tweet</li>
</ul>
</div>
</div>
</div>
<div class="body">
<p>Something</p>
</div>
</div>
</body>
</html>
I expect the border to show the lining downside but it is showing it upside, I couldn't find the solution anywhere on the web and also I was unable to fix it.
The border did appear, but visually on top of the header.
This is because the child elements of .header are floated and hence the height of .header becomes zero. To avoid this, add a clearfix to .header. Here I've used overflow:auto to fix it.
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: auto;
border-bottom: 1px solid #000;
}
.container {
width: 90%;
margin: 10px auto;
overflow: auto;
}
.main-nav {
width: 50%;
float: left;
}
.second-nav {
float: right;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
font-size: 120%;
}
li a {
color: #6f7d87;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.body {
clear: both;
}
<div class="page">
<div class="header">
<div class="container">
<div class="main-nav">
<ul>
<li>Home</li>
<li>Notification</li>
<li>Messages</li>
</ul>
</div>
<div class="second-nav">
<ul>
<li>Search Bar</li>
<li>Profile</li>
<li>Tweet</li>
</ul>
</div>
</div>
</div>
<div class="body">
<p>Something</p>
</div>
</div>
I want to center <h1> or <div class="heading"> on the page. The only solution I have found is
body { text-align: center; }
but I can't figure it out why this code doesn't work. Display: inline-block is used because I want the border to wrap around my .
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
border: 2px solid black;
display: inline-block;
text-align: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
Add this:
.heading {
text-align: center;
}
...and delete display: inline-block from .heading. Instead, add this
.heading h1 {
display: inline-block;
}
.heading is the container of your h1. Both are by default 100% wide. This centers the inline-block h1 inside the full-width .heading
The secret you are looking for is to use a block-level element, and also set a margin: 0 auto. This tells the block to centralise, much like a standard text-align: center.
.header {
display: block;
margin: 0 auto;
}
By default, block-level elements occupy 100% of the width of their container, so you might also want to specify a width for the header. Alternatively, you can have the header automatically adjust to the size of the text by adding a container div that is set as in inline-block, and moving the border to there:
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
display: block;
margin: 0 auto;
text-align: center;
}
.heading-wrapper {
display: inline-block;
border: 2px solid black;
padding: 0 10px;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<div class="heading-wrapper">
<h1>heading</h1>
</div>
</div>
</header>
This way, the header will stay centralised, and have the border automatically expand correctly to accommodate the header, no matter how much text there is.
Hope this helps! :)
You can center it by using display: flex; justify-content; on the parent element. Here is a great resource on centering things https://www.w3.org/Style/Examples/007/center.en.html
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
display: flex;
justify-content: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
a div displays block by default, so it's definitely important to declare if you want to display it otherwise.
However, again, as in another post i saw earlier, you have no css for the containing parent, the header, which would greatly assist you. You should apply any margin to be inherited to this, and there should be no need to apply a small width to your div.
body {
margin: 0;
}
header{margin: 0 auto;}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
border: 2px solid black;
/*display: block; - even if you leave this out, it will display as block*/
text-align: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
I have just started my website, and I am currently working on the header/navigation bar. I've got it looking how I want, however the one thing I can't figure out, is how to centre the logo and hyperlinks vertically in the header?
Here is my HTML:
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><img src="logo.png"></h1>
</div>
<div class="nav">
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="content">
<p>
</p>
</div>
</body>
And CSS:
body {
font-family: 'Nunito', sans-serif;
width: 100%;
margin: auto;
background: #F4F4F4;
}
a {
text-decoration: none;
color: #fff;
}
img {
max-width: 100%;
}
/**********************************
HEADING/NAVIGATION
***********************************/
li {
list-style: none;
float: left;
margin-left: 25px;
padding-top: 10px;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background: #5BBB9B;
width: 100%;
height: 200px;
top: 0;
position: fixed;
border-bottom: 1px solid black;
}
.logo {
float: left;
}
.nav {
float: right;
}
I have tried using vertical-alignment: middle;, however this didn't work.
Anyone have any suggestions?
Use
display:table;
height:100%;
for the parent and
display: table-cell;
text-align: center;
vertical-align: middle;
and check out this awesome article:
https://css-tricks.com/centering-in-the-unknown/