This question already has answers here:
Vertical align text in block element
(10 answers)
Closed 1 year ago.
I have an anchor tag <a> and I display it under a list item tag under an unordered list (which is a navigation bar) using a grid (for a few different reasons).
This is the structure: <ul><li><a>Content</a></li><li>...</li></ul>
The ul is a grid display, with specific column widths etc. I style the list item <li> element to be 100% width, and 100% height. (to fill all of the allocated space in the grid), then I style the a tag to be 100% of the width, and 100% of the height (I need it to fill the entire container.
I also style the <a> tag with a text-align: center; which works great for the horizontal centering, but not for the vertical text centering.
So the problem that I have is that the <a> tag "Content" is aligned to the top of the container (instead of the middle) I've tried many attempts at centering the <a> tag but without success.
Note: vertical-align: middle; has no effect on this element because it has 100% of the height.
Here is an example:
ul.nav{
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
/*display: inline-block;*/
bottom: 0;
left: 0;
width: 80%;
height: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-radius: 4px;
}
ul.nav li{
float: left;
box-sizing: inherit;
background-color: #e4ffe4;
overflow: hidden;
width: 100%;
height: 100%;
vertical-align: middle;
}
ul.nav li a{
color: black;
/*padding: 1vw 5px 1vw 5px;*/
text-decoration: none;
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
}
ul.nav li a span.linkText{
vertical-align: middle;
}
ul.nav li:hover{
background-color: #b4ffb4;
}
<html><head></head>
<body>
<ul class="nav">
<li>
Content
</li>
<li>
Another
</li>
<li>
Final
</li>
</ul>
</body>
<html>
I was wondering if there is a way to keep the element's height 100% and center its text; if so I would much appreciate the help. If not I will work on a workaround for my use case.
just add this to your css :
a {
padding-top:10px;
}
use padding instead of height. I change some css code check below snippet
ul.nav{
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
bottom: 0;
left: 0;
width: 80%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-radius: 4px;
}
ul.nav li{
float: left;
background-color: #e4ffe4;
}
ul.nav li a{
color: black;
padding: 0.8rem 0.3rem;
text-decoration: none;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
}
ul.nav li a span.linkText{
vertical-align: middle;
}
ul.nav li:hover{
background-color: #b4ffb4;
}
<html><head></head>
<body>
<ul class="nav">
<li>
Content
</li>
<li>
Another
</li>
<li>
Final
</li>
</ul>
</body>
<html>
I'm trying to align two html elements, logo text and the navigation bar, vertically to the middle that are inside the header. However, if you look closely, they don't provide the exact alignment for the two elements, as one element seems to be aligned few pixels above the middle of two elements. Can anyone help me out to get the accurate alignment to the middle of these elements?
body {
margin: 0;
}
.main-header {
background-color: #0a0a0a;
color: #ffffff;
padding: 8px 25px;
text-align: middle;
border-bottom: 2px solid #df802e;
}
.main-header_brand {
display: inline-block;
font-size: 1.5rem;
text-align: right;
vertical-align: middle;
}
.main-header_brand a {
display: inline-block;
text-decoration: none;
color: #f1f1f1;
}
.main-header_brand a span {
color: #df802e;
}
.main-header_navbar {
display: inline-block;
width: calc(100% - 180px);
text-align: right;
vertical-align: middle;
}
.main-header_navlinks li {
display: inline-block;
margin-left: 20px;
}
.main-header_navlinks li a {
text-decoration: none;
color: #f1f1f1;
}
.main-header_navlinks li a:hover {
color: #df802e;
}
<header class="main-header">
<div class="main-header_brand">MY<span>BRAND</span></div>
<nav class="main-header_navbar">
<ul class="main-header_navlinks">
<li>ABOUT MYBRAND</li>
<li>HOW CALCULATOR WORKS</li>
</ul>
</nav>
</header>
From what you showed us, these elements actually do seem vertically aligned to me. I mean, they are a couple of pixels above and below the middle - which is to be expected as their heights are different.
Maybe what you want is something more like the second example here?
In this case, I would suggest you to drop the vertical alignment and simply set the padding-bottom of their parent element instead.
I'm trying to center Link 1, Link 2, and Link 3 in the following page:
http://i.imgur.com/qNimZCs.png?1
Here is the relevant bit of html:
<a class="logo" href="#"><p>Logo</p></a>
<ul class="nav">
<li><a class="link" href="#"><p>Link 1</p></a></li>
<li><a class="link" href="#"><p>Link 2</p></a></li>
<li><a class="link" href="#"><p>Link 3</p></a></li>
</ul>
and here's the css:
.link
{
font-size: 1em;
margin-left: 0;
margin-right: 0;
font-weight: none;
text-decoration: none;
color: #123456;
display: inline-block;
padding: 0 0;
}
.nav
{
margin-left: 0;
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
}
.nav li
{
display: inline-block;
margin: auto;
}
I've tried every combination of things that I can think of.
To be specific, I'm trying to center the links such that they are all evenly spaced out along the nav bar. Does anyone see what I'm doing wrong?
Edit:
jsfiddle link: http://jsfiddle.net/B362m/
Try this:
.nav
{
display: inline-block;
margin-left: 5%;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
Working Fiddle
That's kinda a lot of css you've got there. (Consider using shorthand for your seperate margin values?) Two things..
1) if your elements are inline-block, then you can set text-align on the parent to move stuff to the left/center/right accordingling.
2) Your links are already just text, so is there a specific reason why you've set them to inline-block rather than just inline? Not that it makes a big deal.. setting inline-block will allow you to set padding and boost the clickable area.
Anyway... this should align your links:
.nav {
text-align: center;
display:block;
}
.link {
display: inline-block;
margin: 0 5px;
padding: 5px;
}
You can also use display:table and display:table-cell to get the look you're going for.
Try this:
.nav
{
margin:auto;
width: 80%;
display:table;
padding:0;
text-align:center;
}
.nav li
{
display: table-cell;
}
JSFiddle Demo
I'm trying to create a simple navigation that consists of five list items. All of which are 20% in width. There are two items containing text, a centered item containing the site logo as an image and then another two list items containing text.
My issue is that when I have an image in the third item, the text in the surrounding list items gets bumped down. I can't see any margins or anything acting upon them or any reason why this should be happening and no matter what I try, it doesn't seem to work.
Any ideas or an explanation would be much appreciated :)!
JSFiddle
HTML
<div class="navigation">
<div class="container">
<ul>
<li>Home</li><!--
--><li>Categories</li><!--
--><li><img src="http://www.placehold.it/140x64"></li><!--
--><li>Contact</li><!--
--><li>Personalise</li>
</ul>
</div>
</div>
CSS
.navigation {
top: 0;
width: 100%;
height: 64px;
position: fixed;
background: #ffffff;
border-bottom: 1px solid #dfdfdf;
}
.navigation .container {
width: 1000px;
margin: 0 auto;
padding: 0 10px;
}
.navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.navigation li {
width: 20%;
height: 64px;
display: inline-block;
text-align: center;
font-size: 16px;
}
Add or replace this CSS properties in your .navigation li rules :
display: table-cell;
vertical-align: middle;
Example
I know vertical alignment is always asked about, but I don't seem to be able to find a solution for this particular example. I'd like the text centered within the element, not the element centered itself:
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: block;
background: red;
}
<ul>
<li>I would like this text centered vertically</li>
</ul>
Is there really no CSS property for this? I'd be willing to add a <span> in but I really don't want to add any more markup than that.
According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).
All you need to do is:
display: flex;
align-items: center;
See this fiddle.
You can also try
a {
height:100px;
line-height:100px;
}
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;
}
display: grid; place-content: center;
no need margin.
li a {
width: 300px;
height: 100px;
display: grid;
place-content: center;
background: red;
}
<ul>
<li>I would like this text centered vertically</li>
</ul>
You can try the display:inline-block and :after.Like this:
HTML
<ul>
<li>I would like this text centered vertically</li>
</ul>
CSS
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: inline-block;
vertical-align: middle;
background: red;
}
li a:after {
content:"";
display: inline-block;
width: 1px solid transparent;
height: 100%;
vertical-align: middle;
}
Please view the demo.
Would using padding be OK for your needs?: http://jsfiddle.net/sm8jy/:
li {
background: red;
text-align:center;
}
li a {
padding: 4em 0;
display: block;
}
You can also use inline-table alongside table-cell if you want to center your items vertically and horizontally. Below an example of using those display properties to make a menu:
.menu {
background-color: lightgrey;
height: 30px; /* calc(16px + 12px * 2) */
}
.menu-container {
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 100%;
}
.menu-item {
list-style-type: none;
display: inline-table;
height: 100%;
}
.menu-item a {
display: table-cell;
vertical-align: middle;
padding-left: 2px;
padding-right: 2px;
text-decoration: none;
color: initial;
}
.text-upper {
text-transform: uppercase;
}
.text-bold {
font-weight: bold;
}
<header>
<nav class="menu">
<ul class="menu-container">
<li class="menu-item text-upper text-bold">StackOverflow</li>
<li class="menu-item">Getting started</li>
<li class="menu-item">Tags</li>
</ul>
</nav>
</header>
It works by setting display: inline-table; to all the <li>, and then applying display: table-cell; and vertical-align: middle; to the children <a>. This gives us the power of <table> tag without using it.
This solution is useful if you do not know the height of your element.
The compatibilty is very good (relative to caniuse.com), with Internet Explorer >= 8.
Here's the general solution using just CSS, with two variations. The first centers vertically in the current line, the second centers within a block element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>
line one
</li>
<li>
<span style="display: inline-block; vertical-align: middle">line two dot one
<br />
line two dot two</span>
</li>
<li>
line three
</li>
</ul>
<div style="height: 200px; line-height: 200px; border-style: solid;">
<span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
<br />
line two dot two</span>
</div>
</body>
</html>
As I understand it, vertical-align applies only to inline-block elements, e.g., <img>. You have to change an element's display attribute to inline-block for it to work. In the example, the line height expands to fit the span. If you want to use a containing element, such as a <div>, set the line-height attribute to be the same as the height. Warning, you will have to specify line-height: normal on the contained <span>, or it will inherit from the containing element.
with thanks to Vlad's answer for inspiration; tested & working on IE11, FF49, Opera40, Chrome53
li > a {
height: 100px;
width: 300px;
display: table-cell;
text-align: center; /* H align */
vertical-align: middle;
}
centers in all directions nicely even with text wrapping, line breaks, images, etc.
I got fancy and made a snippet
li > a {
height: 100px;
width: 300px;
display: table-cell;
/*H align*/
text-align: center;
/*V align*/
vertical-align: middle;
}
a.thin {
width: 40px;
}
a.break {
/*force text wrap, otherwise `width` is treated as `min-width` when encountering a long word*/
word-break: break-all;
}
/*more css so you can see this easier*/
li {
display: inline-block;
}
li > a {
padding: 10px;
margin: 30px;
background: aliceblue;
}
li > a:hover {
padding: 10px;
margin: 30px;
background: aqua;
}
<li>My menu item
</li>
<li>My menu <br> break item
</li>
<li>My menu item that is really long and unweildly
</li>
<li>Good<br>Menu<br>Item
</li>
<li>Fantastically Menu Item
</li>
<li>Fantastically Menu Item
</li>
<br>
note: if using "break-all" need to also use "<br>" or suffer the consequences
DO NOT USE THE 4th solution from top if you are using ag-grid. It will fix the issue for aligning the element in middle but it might break the thing in ag-grid (for me i was not able to select checkbox after some row). Problem is not with the solution or ag-grid but somehow the combination is not good.
DO NOT USE THIS SOLUTION FOR AG-GRID
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: inline-block;
vertical-align: middle;
background: red;
}
li a:after {
content:"";
display: inline-block;
width: 1px solid transparent;
height: 100%;
vertical-align: middle;
}