I building a header and I have HTML code below
#header{
height:50px;
border-bottom: 1px solid #000;
}
.left{
display: inline-block;
float: left;
}
.right{
display: inline-block;
float: right;
}
.logo{
display: inline-block;
font-size: 40px;
}
.slogan{
display: inline-block;
vertical-align: middle;
}
.menu{
margin: 0px;
}
.menu li {
display: inline;
}
<div id="header">
<div class="left">
<div class="logo">LOGO</div>
<div class="slogan">SLOGAN HERE</div>
</div>
<div class="right">
<nav>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</div>
</div>
I want Slogan and Menu is middle of header div so I use CSS vertical-align: middle; but it's not working. It only working with vertical-align: top;
How to fix it ?
Thanks you so much.
Change display: inline-block to display: table on element .left, then on .slogan change display: table-cell;to display: inline-block;.
#header{
height:50px;
border-bottom: 1px solid #000;
}
.left{
/*display: inline-block;*/
display: table;
float: left;
}
.right{
display: inline-block;
float: right;
}
.logo{
display: inline-block;
font-size: 40px;
}
.slogan{
vertical-align: middle;
display: table-cell;
/*display: inline-block;*/
}
.menu{
margin: 0px;
}
.menu li {
display: inline;
}
<div id="header">
<div class="left">
<div class="logo">LOGO</div>
<div class="slogan">SLOGAN HERE</div>
</div>
<div class="right">
<nav>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</div>
</div>
You could use line-height to achieve the effect you want. The headers height is 50px, so you should give the list items a line-height of 50px. I think this will solve your problem in this case but it wouldn't work if your text has multiple lines.
Related
This question already has answers here:
Vertically center ul in div
(5 answers)
Closed 3 years ago.
I have this unordered list and I want to display it vertically and also make it completely centered inside the parent container. I've managed to make it display vertically and be centered on the x-axis, but not on the y-axis. "vertical-alignment: middle;" doesn't seem to do what I want.
Consider this html-code:
div {
margin: auto;
width: 90%;
height: 200px;
background-color: lightblue;
}
ul {
list-style: none;
height: 100%;
width: 100;
padding: 0;
text-align: center
}
ul li {
display: inline;
margin-right: 20px;
vertical-align: middle;
}
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
To vertically align on y-axis add the below given css to ul:
display:flex;
justify-content:center;
align-items:center;
And remove width:100; from ul tag.
Demo
div {
margin: auto;
width: 90%;
height: 200px;
background-color: lightblue;
}
ul {
list-style: none;
height: 100%;
padding: 0;
display:flex; /*add this */
justify-content:center; /*add this */
align-items:center; /*add this */
text-align: center
}
ul li {
display: inline;
margin-right: 20px;
vertical-align: middle;
}
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
You can use display: flex for the div and margin: auto for the ul. And remove height and width rules from ul. here's the working Fiddle
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
div {
display: flex;
margin: auto;
width: 90%;
height: 200px;
background-color: lightblue;
}
ul {
margin: auto;
list-style: none;
padding: 0;
text-align: center
}
ul li {
display: inline;
margin-right: 20px;
vertical-align: middle;
}
To align vertically u can use line-height.
use line-height instead of height in div tag.
div {
margin: auto;
width: 90%;
line-height: 200px; /*change this */
background-color: lightblue;
}
div {
margin: auto;
width: 90%;
line-height: 200px;
background-color: lightblue;
}
ul {
list-style: none;
height: 100%;
padding: 0;
text-align: center
}
ul li {
display: inline;
margin-right: 20px;
vertical-align: middle;
}
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
Below I have a hidden <ul> which appears when the <li> 'More' is hovered over.
Due to the margin of the <li>, the <ul> dissapears when hovering between 'Extras' and the <ul> - how do I prevent this from happening?
#container ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#container li {
color: #fff;
width: 80px;
height: 60px;
float: left;
line-height: 60px;
margin: 10px;
background: black;
}
#container li a {
display: block;
}
.extras:hover > ul.hidden {
display: block;
}
ul.hidden {
display: none;
}
<div id="container">
<div class="center" style="text-align: center; display: inline-block;">
<nav>
<ul class="nav">
<li>Example 1</li>
<li>Example 2</li>
<li class="extras">More
<ul class="hidden">
<li>Hoverable</li>
<li>Hoverable</li>
<li>Hoverable</li>
</ul>
</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</nav>
</div>
</div>
Your ul tag is not getting height. Here try this
#container ul {
list-style: none;
margin: 0px;
padding: 0px;
float:left;
width:100%;
}
#container li {
color: #fff;
width: 80px;
height: 60px;
float: left;
line-height: 60px;
margin: 10px;
background: black;
}
#container li a {
display: block;
}
.extras:hover > ul.hidden {
display: block;
}
ul.hidden {
display: none;
}
<div id="container">
<div class="center" style="text-align: center; display: inline-block;">
<nav>
<ul class="nav">
<li>Example 1</li>
<li>Example 2</li>
<li class="extras">More
<ul class="hidden">
<li>Hoverable</li>
<li>Hoverable</li>
<li>Hoverable</li>
</ul>
</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</nav>
</div>
</div>
Where you use float always remember to set layout of parent.
#container .center {
display: inline-block;
vertical-align: top;
text-align: center;
}
#container ul {
list-style: none;
padding: 0;
margin: 0;
}
#container .nav:after {
display: block;
content: '';
clear: both;
}
#container .nav > li {
margin: 10px;
float: left;
}
#container ul li {
position: relative;
line-height: 60px;
background: black;
cursor: pointer;
height: 60px;
color: #fff;
width: 80px;
}
#container ul li ul {
position: absolute;
top: 100%;
left: 0;
}
#container ul ul li {
margin-top: 10px;
}
#container ul li a {
display: block;
}
.extras:hover > ul.hidden {
display: block;
}
ul.hidden {
display: none;
}
<div id="container">
<div class="center">
<nav>
<ul class="nav">
<li>Example 1</li>
<li>Example 2</li>
<li class="extras">More
<ul class="hidden">
<li>Hoverable</li>
<li>Hoverable</li>
<li>Hoverable</li>
</ul>
</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</nav>
</div>
</div>
I want to center a ul between a float left and float right. They are inside a container which is with a fixed width and is also centered.
<header>
<div class="conatiner">
<div class="left"><img></div>
<div class="right"><img></idv>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>
I want them to look like this:
[ [[logo] [Item 1 Item 2 Item 3] [options]] ]
My css is something like this:
header {
width: 100%;
}
.container {
max-width: 1200px;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
However the .center ul is centered between the .left and .right and because .left has a larger width than .right it gets shifted a little to the right. What I want to achieve is to make it centered no matter how big .left and .right are.
In this case you can use position: absolute on ul and transform: translateX(-50%) to center.
With position: absolute you remove ul from elements flow so width of images doesn't affect position of ul and it will always stay in center of window.
header {
width: 100%;
position: relative;
}
.container {
max-width: 1200px;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
padding: 0;
position: absolute;
margin: 0;
left: 50%;
top: 0;
transform: translateX(-50%);
}
<header>
<div class="conatiner">
<div class="left"><img src="" alt="Lorem ipsum dolor."></div>
<div class="right"><img src="" alt="right"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</header>
you can reset BFC for ul , so it can center itself in between floatting elements without laying under it.
Diplay:table; would be appropriate since container will also shrink on its content:
header {
width: 100%;
background:linear-gradient(to left, gray 50%, lightgray 50%);
}
.container {
max-width: 1200px;
}
.left {
float: left;
margin-right:50px;/* cause it is 50px less wide than the other one */
}
.right {
float: right;
}
.center {
display:table;
margin:auto;
padding:0;
border-spacing:0.25em;
}
.center li {
display:table-cell;
border:1px solid;
}
<header>
<div class="container">
<div class="left"><img src="http://lorempixel.com/50/50"></div>
<div class="right"><img src="http://lorempixel.com/100/50"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>
or flex:
header {
width: 100%;
background:linear-gradient(to left, gray 50%, lightgray 50%);/* see center */
}
.container {
max-width: 1200px;
display:flex;
}
.left {
order:-1;
margin-right:-50px;/* if know wich is biiger and how much bigger an equal negative margin of that extra size may swallow the difference .. */
}
.right {
order:1;
}
.center {
display:flex;
margin:auto;/* instead : justify-content:space-between; on parent (given into another answer ) */
padding:0;
order:0
}
.center li {
list-style-type:none;
margin:0.25em;
border:solid 1px;
}
<header>
<div class="container">
<div class="left"><img src="http://lorempixel.com/100/50"></div>
<div class="right"><img src="http://lorempixel.com/50/50"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>
The simplest and easiest way is flexbox. Like this:
.container {
display: flex;
justify-content: space-between;
}
<header>
<div class="container">
<div class="left"><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"></div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="right"><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"></div>
</div>
<header>
Try this method:
.inline-block { display: inline-block; }
.floatright { float: right; }
.floatcenter { margin-right: auto; margin-left: auto; }
.floatleft { float: left; }
<div style="text-align:center;">
<div class="inline-block floatleft">Logo</div>
<div class="inline-block floatcenter">Menu</div>
<div class="inline-block floatright">Options</div>
</div>
I have this:
http://jsfiddle.net/Lehqyf1t
<ul class="myclass">
<li><span style="background-color:#f608ff"></span>Text 1</li>
<li><span style="background-color:#f608ff"></span>Text 2</li>
</ul>
css:
.myclass li span {
width: 25px;
height: 25px;
display: block;
float: left;
margin-right: 10px;
}
No matter what I try I cannot get both lines to be aligned properly. How could I solve it?
You have to clear the float in <li>.
http://jsfiddle.net/Lehqyf1t/2/
You can swap out the float for display:inline-block and then you don't have to worry about clearing floats at all.
li {
list-style:none;
}
.myclass li span{
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
background-color:#f608ff;
}
<ul class="myclass">
<li><span></span>Text 1</li>
<li><span></span>Text 2</li>
</ul>
I want that the text of the <li> will be in the middle of the #nav_bar. I tried to do this by margin and padding and I didn't succeed, anyone know how to do this?
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
}
li {
display: inline-block;
margin: 40px;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>
Reset ul's default padding, add text-align: center to ul to center the lis and add some left and right padding to lis.
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
}
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
padding: 0 10px;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>
Try text-align:center http://jsfiddle.net/oktsheaw/
#nav_bar {
text-align:center;
border: 2px solid black;
background-color: gray;
height: 40px;
}
Try this:
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline;
margin; 0;
list-style: none;
line-height: 40px;
padding: 0 15px;
}
You mean like this: http://codepen.io/anon/pen/KwaNwZ
CSS:
#nav_bar {
border: 2px solid black;
background-color: gray;
text-align:center;
}
li {
display: inline-block;
margin-left: 40px;
}
Horizontally
You could use text-align:center to align horizontally.
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
text-align:center;
}
ul {
padding: 0;
}
li {
display: inline-block;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>
Vertically
You could use positioning to align vertically.
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
width:100%;
position:relative;
}
ul {
padding: 0;
margin:0;
position: absolute;
top: 25%;
}
li {
display:inline-block;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>
Both
I've used positioning, although other forms would be equally as efficient.
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
width:100%;
position:relative;
}
ul {
padding: 0;
margin:0;
position: absolute;
top: 25%;
left:25%;
}
li {
display:inline-block;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>
because of the height the elements were flowing outside remove the height of #nav_bar it will be vertically center and add text-align:center horizontally center
#nav_bar {
border: 2px solid black;
background-color: gray;
text-align: center;
}
li {
display: inline-block;
margin: 5px;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>