I am displaying number of boxes in a row with fix height and width, generated from <li> tags.
now I need to align the text in the vertical center.
The CSS vertical-align has no impact, maybe I am missing something???
I am not looking for tricks using (margin, padding, line-height), these will not work because some text are long and will break into two lines.
Please find the actual code:
CSS code
ul.catBlock{
width:960px;
height: 270px;
border:1px solid #ccc;
}
ul.catBlock li{
list-style: none;
float:left;
display:block;
text-align: center;
width:160px;
height: 100px;
}
ul.catBlock li a{
display: block;
padding: 30px 10px 5px 10px;
height:60px;
}
HTML code
<ul class="catBlock">
<li>IP Phone</li>
<li>Dual SIM Switch Server</li>
<li>IP PBX</li>
</ul>
Define the parent with display: table and the element itself with vertical-align: middle and display: table-cell.
However many years late this response may be, anyone coming across this might just want to try
li {
display: flex;
flex-direction: row;
align-items: center;
}
Browser support for flexbox is far better than it was when #scottjoudry posted his response above, but you may still want to consider prefixing or other options if you're trying to support much older browsers. caniuse: flex
line-height is how you vertically align text. It is pretty standard and I don't consider it a "hack". Just add line-height: 100px to your ul.catBlock li and it will be fine.
In this case you may have to add it to ul.catBlock li a instead since all of the text inside the li is also inside of an a. I have seen some weird things happen when you do this, so try both and see which one works.
Surprisingly (or not), the vertical-align tool actually works best for this job. Best of all, no Javascript is required.
In the following example, I am positioning the outer class in the middle of the body, and the inner class in the middle of the outer class.
Preview: http://jsfiddle.net/tLkSV/513/
HTML:
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0; }
#container {
text-align: center;
height: 100%; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.outer {
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block; }
.inner {
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block; }
Vertical align works by aligning the centers of elements that are next to each other. Applying vertical-align to a single element does absolutely nothing. If you add a second element that has no width but is the height of the container, your single element will move to vertically center with this no-width element, thus vertically centering it. The only requirements are that you set both elements to inline (or inline-block), and set their vertical-align attribute to vertical-align: middle.
Note: You may notice in my code below that my <span> tag and <div> tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.
In the future, this problem will be solved by flexbox. Right now the browser support is dismal, but it is supported in one form or another in all current browsers.
Browser support: http://caniuse.com/flexbox
.vertically_aligned {
/* older webkit */
display: -webkit-box;
-webkit-box-align: center;
-webkit-justify-content: center;
/* older firefox */
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
/* IE10*/
display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-pack: center;
/* newer webkit */
display: -webkit-flex;
-webkit-align-items: center;
-webkit-box-pack: center;
/* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
display: flex;
align-items: center;
justify-content: center;
}
Background on Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
There are no perfect answers provided here except Asaf's answer which doesn't provide any code nor any example, so I would like to contribute mine...
Inorder to make vertical-align: middle; work, you need to use display: table; for your ul element and display: table-cell; for li elements and than you can use vertical-align: middle; for li elements.
You don't need to provide any explicit margins, paddings to make your text vertically middle.
Demo
ul.catBlock{
display: table;
width:960px;
height: 270px;
border:1px solid #ccc;
}
ul.catBlock li {
list-style: none;
display: table-cell;
text-align: center;
width:160px;
vertical-align: middle;
}
ul.catBlock li a {
display: block;
}
As explained in here: https://css-tricks.com/centering-in-the-unknown/.
As tested in the real practice, the most reliable yet elegant solution is to insert an assistent inline element into the <li /> element as the 1st child, which height should be set to 100% (of its parent’s height, the <li />), and its vertical-align set to middle. To achieve this, you can put a <span />, but the most convenient way is to use li:after pseudo class.
Screenshot:
ul.menu-horizontal {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
}
ul.menu-horizontal:after {
content: '';
clear: both;
float: none;
display: block;
}
ul.menu-horizontal li {
padding: 5px 10px;
box-sizing: border-box;
height: 100%;
cursor: pointer;
display: inline-block;
vertical-align: middle;
float: left;
}
/* The magic happens here! */
ul.menu-horizontal li:before {
content: '';
display: inline;
height: 100%;
vertical-align: middle;
}
Simple solution for vertical align middle... for me it works like a charm
ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}
Give this solution a try
Works best in most of the cases
you may have to use div instead of li for that
.DivParent {
height: 100px;
border: 1px solid lime;
white-space: nowrap;
}
.verticallyAlignedDiv {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
<div class="DivParent">
<div class="verticallyAlignedDiv">
<p>Isnt it good!</p>
</div><div class="DivHelper"></div>
</div>
Related
W3School says :
When we use vertical-align:middle; The element is placed in the
middle of the parent element
So I tried to do that, But didn't get desired outcome
CODE :
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
vertical-align: middle;
}
p {
vertical-align: middle;
}
<div>
text
<p>
yo bro
</p>
</div>
Why m I not getting the desired outcome ?
because vertical-align only applies to inline level and table-cell elements. Both div and p are block level elements.
Applies to inline-level and table-cell elements. It also applies to
::first-letter and ::first-line.
MDN Source
With that in mind and using your example make your div a table and your p a table-cell
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: table
}
p {
vertical-align: middle;
display: table-cell;
}
<div>
<p>
yo bro
</p>
</div>
NOTE: Don't trust W3Schools as source, instead use MDN or W3C Specs
There are a couple of problems with your posted code.
Firstly, you haven't really explained what your desired outcome is so it's hard to help you with your specific problem.
Assuming you want to align the paragraph text with the other text in the div, you'll have to add display:inline-block; to your paragraph. Then, the trick with vertical aligning is to use line-heightas well as height. Set them both the same and voilá, things line up nicely.
div{
height: 200px;
width: 500px;
line-height:200px;
background: red;
text-align:center;
vertical-align: middle;
}
p{
display:inline-block;
padding:0;
margin:0;
}
codepen here
Add to div in css display: table-cell ;
div {
display: table-cell;
height: 200px;
width: 500px;
background: red;
text-align:center;
vertical-align: middle;
}
p {}
try using, line-height in styling, as shown below, or fiddle link
div{
height: 200px;
width: 500px;
background: red;
text-align:center;
vertical-align: middle;
}
p{
/* vertical-align: middle; */
line-height: 100px;
}
<div>
text
<p>
yo bro
</p>
</div>
If you wanted to use FlexBox you could do it this way.
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
This makes things centred both ways. If you want it just to be the height then delete justify-content. Note that you need to do flex-direction: column in this example to make the content go down the page and not sit side-to-side.
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<div>
yo
<p>bro</p>
</div>
the title pretty much sums it up. I have the following code:
<div class="container">
<p>Hello world</p>
</div>
And CSS:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle; /* Why you no work!?!? */
}
But the text is not vertically aligning in the div. I'm clearly missing something here or don't understand a certain concept. Anybody tell me what's happening?
Thanks!
if you have single line text add this to your css.
.container > p{
line-height:50px;
}
To use vertical-align: middle, you need to use display: inline-block.
Your code will change to this:
.container{
display: inline-block; /* This is the line you need to introduce */
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle;
}
You can take a look at the demo.
Update
Using display: table for .container and display: table-cell for .container p makes it work.
Updated demo
.container{
display: table;
width: 100%;
height: 200px;
background-color: lightblue;
vertical-align: middle;
}
.container p {
display: table-cell;
vertical-align: middle;
}
Vertical alignment in CSS is not as straightforward as horizontal alignment.
Depending on your case and the content you need to apply one technique or another.
You can check this link for different techniques:
http://www.vanseodesign.com/css/vertical-centering/
In short, vertical-align: center; is not going to work in your case
Add to your container the display property as follows:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
display:inline-block;
vertical-align: middle;
}
I want to display the content of the div element in a single row. However the width of the ul element is unknown because it can have a number of child li elements. The h2 would always occupy the rest of the space. each li element has a width of 20px.
It would look something like this:
|----h2------------|li|li|li||
|----h2---------------|li|li||
HTML:
<div>
<h2>name</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
I have found numerous solutions on the internet but not sure which to choose (proper solution vs hacks). browser compatibility is not an issue, it only needs to work on the latest version of chrome.
Update:
There will be multiple rows of div elements and the li elements should align.
The simplest, most compact and straight forward way is to use floats. If you know your elements will be different sizes, but you don't know exactly what they will be, there are 2 completely flexible ways to go about this.
This would be how to do it using display: table:
http://jsfiddle.net/8uTfp/1/
div {
display: table;
width: 100%;
}
h1, ul {
display: table-cell;
vertical-align: middle;
}
ul {
text-align: right;
}
li {
display: inline-block;
}
This would be how to do it using flexbox:
http://jsfiddle.net/8uTfp/
div {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
ul {
margin-left: auto;
}
li {
display: inline-block;
}
You could float the h2 left, and the ul right.
div h2 { float: left; }
div ul { float: right; }
If the div's height and the list items' height are fixed and known values, you could try the followihg CSS (notice I added css classes):
.container{
height: 30px;
position: relative;
}
.container ul{
padding: 0; margin: 0;
/* Other reset rules here ... */
position: absolute;
top: 0;
right: 0;
}
.container ul li{
display: inline;
float: left;
height: 30px;
/* Other format rules here ... */
}
If you don't specify the div's height, it will be set by the h2 element's metrics, since absolutely positioned elements don't force the layout. I hope this helps.
I'm trying to use a known method to make my DIV centered inside another DIV horizontally, without knowing the inner DIV's width (shrink to content method) on nested DIVs.
Here's the HTML:
<div class="my-container">
<div class="my-wrapper">
<div class="item">
<span>My Item</span>
</div>
</div>
</div>
Here's the CSS:
div.my-container {
width: 300px;
height: 100px;
padding: 100px 0 0 0;
border: 1px solid #000;
}
div.my-wrapper {
background-color: blue;
text-align: center;
}
div.item {
display: inline-block;
padding: 0 20px;
background-color: pink;
}
div.item span {
display: inline-block;
height: 50px;
background-color: red;
}
Test case on jsFiddle: http://jsfiddle.net/ThZxx/2/
It looks perfectly OK in all browsers:
except Internet Explorer 7:
Looks like the pink DIV (div.item) is not shrinking to content and taking all available space in parent container.
How can i fix this?
It's a problem with IE7, since it doesn't support display: inline-block. You have to add a conditional style for IE, changing it to display: inline.
<!--[if IE 7]>
div.item { display: inline; }
<![endif]-->
Change div.item to this:
div.item {
display: inline-block;
padding: 0 20px;
background-color: pink;
*display: inline;
zoom: 1;
}
Adding the * in front of the extra display style prevents other browsers from using the style. Only IE will parse it and apply it.
IE7 doesn't understand inline-block properly, but theres a simple hack to fix it by adding zoom:1; and *display: inline; to your css, like so:
div.item {
display: inline-block;
padding: 0 20px;
background-color: pink;
zoom:1;
*display: inline;
}
you can read more about the issue, and the fix here:
http://flipc.blogspot.ca/2009/02/damn-ie7-and-inline-block.html
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/