I wanted to evenly distribute a few divs horizontally. So I found this link:
How do I distribute items horizontally with CSS?
which explained how to do it with an unordered list. That takes care of the horizontal distribution.
Now, when I add different text and styles of text to each of these divs, they do not vertically align with one another. It seems the bottoms of the last lines of text within each div align with eachother, instead of the last line of the div.
Here's my fiddle: http://jsfiddle.net/3jxV7/1/
How can I just get the divs to vertically align with one another, no matter what content I include within those divs?
To make it easy, assume all my divs have the same dimensions:
div.foo
{
width:100px;
height:100px;
background:cyan;
}
Add this property in your CSS
li
{
vertical-align:middle;
}
View the demo http://jsfiddle.net/3jxV7/2/
If you want the texts inside vertical aligned too then add this on your CSS
div.foo
{
display:table-cell;
vertical-align:middle;
}
View the demo http://jsfiddle.net/3jxV7/4/
Related
Background:
I have created a ul menu that contains 2 divs -> one div for the icon, second div for the text. Reason for the divs is that I want the text to be neatly vertically aligned, which otherwise wouldn't be the case.
Problem:
I managed to make the whole second div clickable with display: block; but I struggle to expand the link beyond the div so that it stretches over the entire li, i.e. also covers the first div.
Attempts:
I already tried using Bootstrap's .stretched-link on the href tag (see first link) and setting position: relative; to all divs and li. However, this didn't work.
Question:
Is it somehow possible to expand the link across the entire li, while keeping the divs to neatly align?
Note:
(a) I'm aware that one work-around would be to place the href tag around the li, but I understand this isn't good practice anymore.
(b) Just to show the alignment problem, I have created a second JSfiddle, when the divs are removed.
JSfiddle
(1) divs included, but icon div not clickable: https://jsfiddle.net/AlphaX/z5f60m23/11/
(2) divs removed and whole li is clickable, but text isn't vertically aligned because font awesome icons have different widths by default: https://jsfiddle.net/AlphaX/89a1x7gs/2/
Just do your second approach, with the <a> wrapping the <i> and the span, and add some additional style rules:
li i {
width: 20%;
display: inline-block;
}
I edited your Fiddle too: https://jsfiddle.net/uxnfvzyc/1/
Take a look at this fiddle. I've got divs on either side, with fixed widths of 50px, and display:inline-block.
I want the div on the inside to expand to fill the gap between these two divs, but the problem is if I put lots of text inside this div it pushes itself onto the next line, and the layout breaks down.
Also, I want it so the middle div will fill the space even if there is a small amount of text in it (less than the page width).
How can I ensure the left and right divs are always on the left and right, and that the content div always fills the space in between them?
I tried using CSS3's calc, but it appears that it isn't very well supported.
This is the sort of situation that was handled in the past by using tables for layout. This will be fixed in the future by the new Flexbox implementation https://developer.mozilla.org/en-US/docs/CSS/Flexbox
In the meantime, you can emulate the table effect by using display: table-cell, this will cause each div to stretch the way you would expect a table to. If you want more control over the total width you can wrap it in a div that has a display: table-row and a set width.
.col {
background-color:#333;
color:#EEE;
width:50px;
display:table-cell;
}
.middle {
background-color:#EEE;
color:#333;
display:table-cell;
}
If you are open to using javascript, this will work:
$(function(){
$('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
$(window).resize(function() {
$('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
});
});
Working JSFiddle:
http://jsfiddle.net/vh8Zu/
I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
I'm creating a horizontal menu bar.
There is an outer div that contains inner divs (each of these divs is the individual menu item).
I use float: left for styling on these inner divs to display them horizontally instead of vertically.
The problem is that the menu bar has uneven space on the left and right, hence the overall menu bar doesn't appear to be centralized... i.e the first menu item on left has lesser space from left border and the space between last menu item on right and the right border is more.
I want equal margin/padding on the left and right to make the menu bar display in center.
I tried setting margin-left: auto; margin-right: auto on the outer div and then on the inner div as well. Both don't seem to help.
Already had a look here: How to horizontally center a <div> in another <div>?
However this particular answer is to center just one div, what I have is a collection of horizontal divs (menu items) that need to be centralized.
Any help is appreciated.
If your menu items aren't complex (like no fixed sizes or sub-elements), try adding the following styles:
#outer {
text-align: center;
}
.menu-item {
display: inline; /* replace 'float:left' with this */
}
DEMO
Otherwise you'll need a wrapper for the inner elements that has a fixed width:
#wrapper {
margin: 0 auto; /* center in outer DIV */
width: /* sum of widths of inner elements */;
}
DEMO
NOTE: Semantically its better to style menu items using a list, as in the DEMOs.
Firstly if all your menu items have specified widths and display:inline which is default, you wouldn't need a float to line them up.
But supposing you do, when you set a float, your elements are removed from the natural flow of the document, and hence margin:auto will not work to center it. What you could do in this case is create another container div of specified width for the menu items, within which you could use float to line them up.
Now what's left is to center this one container div within your outer div, which you have already seen how to solve. For example, you could use the margin:auto technique on the container div to center it. Make sure you have text-align:center for the outer div.
I have a php script that is generating an unspecified number of divs inside another but by default the divs are being vertically aligned as in one of top of the other though their widths can allow for them to be horizontally aligned. How can i go about this?
div > div{
display: inline-block;
}
float them to left
float:left;
or give them inline display mode.
display:inline;