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;
}
Related
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>
How can I align all my bullets perfectly?
Expected result: Bullets line up to one another
Actual result: They move depending on how big the text is for the
JSFiddle for clarification:
https://jsfiddle.net/hk12hhp1/
Result I want (look at red line):
http://prntscr.com/grt24m (make bullets aligned just like red line is straight)
Fiddle code:
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
#center-everything{
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
Note: I still want text-align to be center
An alternative solution, using pseudo-element to create the bullet, with position: absolute positioning it on the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
ul {
list-style: none;
}
li {
padding-left: 20px;
position: relative;
}
li:before {
content: '☻';
position: absolute;
left: 0;
top: 1px;
font-size: 10px;
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
Your question isn't at all clear about exactly what you mean by wanting the bullets vertically aligned on a centered list.
Having the bullets all the way to the left in a centered list is not any sort of standard typography conventions, so I think you might really be asking is for the entire left-aligned list inside the container? I've seen this asked more often than having the bullets float all the way to the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 300px;
list-style-position: inside;
}
ul {
text-align: left;
padding-left: 0; /* remove any padding to stop it throwing off the "center" */
margin: auto; /* center the ul */
display: inline-block; /* hack to make the ul only as wide as its contents */
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
To do this, you just need to change the styling for the ul, nothing else.
#center-everything{
background-color: gray;
height: 100px;
width: 300px;
}
li {
display: inline-block;
}
li:before {
content: "■"
}
span {
position: absolute;
left: 150px;
transform: translateX(-50%);
}
<div id='center-everything'>
<ul>
<li></li><span>test1wef</span><br>
<li></li><span>test2wef</span><br>
<li></li><span>test3wef</span><br>
</ul>
</div>
I just want to move the 3 links(shaped into block) to center. it should be easy but I just can't figure out how to. Center as in horizontally center. its probably a silly mistake or concept problem. I don't want to move the text in centre of box, just want to move the box.
CSS:
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
header li{
list-style: none;
}
a:link, a:visited
{
text-decoration: none;
background-color: green;
border: 5px solid black;
color: white;
display: block;
text-align: center;
width: 200px;
position: relative;
margin-left: 240px;
margin-bottom: 5px;
}
a:hover, a:active{
color: black;
background-color: red;
margin-bottom: 10px;
font-size: 1.5em;
}
header li:nth-child(3)
{
font-size: 25px;
}
HTML:
<header>
<ul>
<li> Google</li> <!-- notice here how when 9i add "http:// the link will open and if don't it won't-->
<li> Facebook </li>
<li> Wikipedia </li>
</ul>
</header>
How about displaying your whole unordered list as an inline block and centering the text content within your header, making the list centered:
header{
text-align: center;
}
header > ul{
display: inline-block;
}
JSFiddle
Note: I removed the margin from your anchors, since I assumed this was some attempt at making them more central. Correct me if I'm wrong.
You can also add margin: 0 auto; to the actual anchor tags and remove your margin-left attribute. Fiddle
As it's been said, to center blocks horizontally you should use automatic margins on both left and right sides. It will work with any block (not inline elements) that has a specified width. Inline elements can easily be converted into blocks with display: block;
div{
display: block;
margin-left: auto;
margin-right: auto;
background-color: red;
height: 100px;
width: 100px;
}
<div></div>
I'd like to be able to just justify this text..
For the life of me I cannot get it to work.
HTML:
<div id="main-content-left-container">
<ul id="left-bullets">
<li>I want all/li>
<li>of this text</li>
<li>justified to the left-bullets 70% width size</li>
</ul>
<img > //not important here
</div>
CSS:
#main-content-left-container {
width: 450px;
position: relative;
float: left;
margin-left: 5px;
}
#left-bullets {
position: relative;
width: 70%;
margin: 0 15px 0 auto;
list-style-type: disc;
font-size: 12pt;
text-align: justify;
}
I have tried many variations and combinations of text-align in the CSS. Display: Block, etc. Yet I still cannot get this text to justify.
I found this piece of code that could do it:
#element:after {
content: "";
display: inline-block;
width: 100%;
}
This is not supported by some versions of IE though.
Fiddle: http://jsfiddle.net/bortao/LtKeK/
I need to vertically align in middle labels of menu. Allso if client will change the value of label and it will break in two lines, it'll stays in middle. As i know vertical-align: middle works for table cells, but I need to generate menu from <li> elements. See example code below.
html
<ul>
<li>qwe</li>
<li>asd</li>
<li>zxcvbnm asdfgh</li>
</ul>
css
ul {
list-style: none;
}
li {
float:left;
border: 1px solid;
margin: 1px;
height: 60px;
width: 60px;
background: tomato;
text-align: center;
vertical-align: middle;
}
a {
vertical-align: middle;
}
And working prototype at jsbin
Hi now give to li display:table-cell and remove float:left
as like this
li {
display:table-cell;
vertical-align: middle;
float:left; // remove this line
}
Demo
Just add line-height:60px to your a tag and it works.
See Demo
Use display: inline-block for <a> elements.
ul {
list-style: none;
}
li {
float:left;
border: 1px solid;
margin: 1px;
height: 60px;
line-height: 60px;
width: 60px;
background: tomato;
text-align: center;
vertical-align: middle;
}
a {
vertical-align: middle;
display: inline-block;
line-height: normal;
}
Example fiddle : http://jsbin.com/ohazot/1/edit