Vertically align items, without vertical align: middle and flexbox

Follow up on previous topic, which reference is not required in this endeavor.

I have an element, parent element, which is height: 100%, inside of it, there are 4 <a href="#">'s

I cannot use vertical-align: middle method. Because I need to apply margin to the elements, which is kinda impossible on table-cell.

I cannot use flexbox, because of compatibility, which explodes before Internet Explorer 10.

Any other manners to align four inline-block elements vertically?

1 Like

Won’t padding do the trick?

100% of what? % heights need a parent height defined, defining heights is often not advisable.

It would kind of screw up my design. (you can start laughing now)

I cannot be more precise.

I don’t know the design you have in mind, so it’s hard to give specific advice, or understand why padding won’t work in it, but there will be a way.
I’m guessing it’s a basic horizontal menu bar, like the other thread. That’s simple enough with display table. Unless there is something special about it we don’t know.

re:’ 100% of what’… what was meant is that the browser itself doesn’t know what you mean by height:100% UNLESS you have given the PARENT element explicit height. So if you have a .parent with height:auto; and a .child with height: 100% the child will not ‘take’ the declaration.

It would kind of screw up my design.

OH BOY!!:unamused:

Would it still screw up your design IF you use box-sizing:padding-box; ( don’t forget to prefix) ?

Why do people suddenly become so asocial whenever someone make grotesque mistake or has very specific unpopular approaches to tasks?

If you think that I hurt your brain because of my very stupid question or request, you’re MORE THAN WELCOME to continue scrolling. I’m in no way trying to get your irritated.

Oh it will work, but the buttons have to further from each other, so that certain elements like shadows or underline don’t overlap, their own elements must stay away from each other. It’s hard to explain, but the elements must be further from each other, not just their content.

Nothing new. I’m just asking for vertical centering:

Why do you CONCENTRATE on HEIGHT of the PARENT? And WHY do you CAPS things, that DON’T even partake in SOLUTION. The BOX is GETTING it’s height from PARENT. The HUNDRED per-cent work PERFECTLY. Yes? Can we stop screaming for a second?

Stupidly enough, because suddenly everybody got irritated as if I offended their almighty left/right-wing. I decided to change my design so it will look nicely with padding.

This is my last post on SitePoint. It seemed like a good website, but if there’s no room for juniors without mediors/seniors having their pans fried, then I don’t think this website is right for me.

Thanks to all the Advisors who had enough patience and will to help me :slight_smile:

@Webkitnote,

Have you posted any code in this thread? or a link to a working page? (Sorry if I missed a link somewhere.)

If you will post a “working page” of code in this thread (one that starts with <doctype> and ends with </html> and demonstrates the issue/s), I don’t mind giving it a look. The “working page” will give me an overall picture from which we can hopefully help.

Folks here are not intending to come across as rude, impatient, or critical nor do we intend to be irritating. That serves no one.

Cheers

3 Likes

Unfortunately, children don’t get their height from the parent, which is what was being pointed out above. Before flexbox, the only workaround was to get JS to calculate the height of the parent and then use that info to distribute child elements.

Sorry you feel put off by the responses. We’re only trying to help—truly! :cry:

3 Likes

I think you are being a little bit sensitive and perhaps not understanding that the comments were well intentioned. Sometimes its hard to tell the nature of a post especially when someone says ‘you can’t do that’ :smile: (That’s why I add a lot of smilies when telling people they are doing it completely wrong as there no nice way to say rip it up and start again).

The core of the problem is that CSS is governed by context and to give an accurate answer we need t know the complete context of whats involved which will usually means seeing a demo of the code that’s not working for you.

When you say things like this:

I cannot use vertical-align: middle method. Because I need to apply margin to the elements, which is kinda impossible on table-cell.

What you are saying is half correct but not in a meaningful way with regards to the problem. Vertical align applies to the content in the table-cell which will be vertically aligned within the table-cell and that content can easily have margins applied to it as required.

Margins do not apply to table-cells themselves because that would be nonsense in the context of a cellular layout (You can’t move cells in a table up and down). However you can certainly move the content in a cell up and down.

Another sticking point for beginners and even some intermediate to advanced folk is a misunderstanding of how height works. This is not always their fault because height is a complex subject and easily misunderstood.

Here are just a few of the things you need to know about heights:

A percentage height can only be applied to an element if its parent has a fixed height defined. If a parent only contains content then its height is auto and a percentage height on the child will fail and resolve to auto.

If the parent has a percentage height defined also then it follows that this parents parent must have a height defined also. If all have percentage heights defined then there must be an unbroken chain of heights heading all the way back to the html element.

If the element is some distance down the page and you apply 100% height to it then that will take the bottom of the element below the fold of the page and not just to the bottom of the viewport.

If you put more content into the percentage height element than it can hold then the element will not grow and content will spill out.

Suffice to say that for most situations a percentage height is inadvisable or the wrong approach.

There are exceptions where you want a page wrapper than has a minimum of 100% height to fill the page and in these case you would set html and body to height:100% and then this page wrapper could have min-height:100% which will allow it to grow.

Another exception to all the rules above is that if you define the pagewrapper as display;table then you can indeed apply height:100% because elements with a display of table will treat height as a minimum and allow the element to grow (assuming the that html and body have been set to 100% or that you are using the new css vh units instead).

So you can see from the brief summary of some of the rules that detailed answers can only be made based on the situation in hand.

Based on your first post my thoughts would be something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0;height:100%}

body{display:table;height:100%;width:100%}
.wrap{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	background:#ccc;
}
.wrap a{
	display:inline-block;
	vertical-align:middle;
	width:30%;
	height:50px;
	background:red;
	textx-align:center;
	line-height:50px;
	margin:25px;
}



</style>
</head>

<body>
<div class="wrap">
	<a href="#">Testing</a>
	<a href="#">Testing</a>
	<a href="#">Testing</a>
	<a href="#">Testing</a>
</div>
</body>
</html>

If you don’t want the blocks side by side then change the anchors to display block and auto side margins instead.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0;height:100%}

body{display:table;height:100%;width:100%}
.wrap{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	background:#ccc;
}
.wrap a{
	display:block;
	vertical-align:middle;
	width:30%;
	height:50px;
	background:red;
	textx-align:center;
	line-height:50px;
	margin:25px auto;
}



</style>
</head>

<body>
<div class="wrap">
	<a href="#">Testing</a>
	<a href="#">Testing</a>
	<a href="#">Testing</a>
	<a href="#">Testing</a>
</div>
</body>
</html>
6 Likes

Just a note:
I meant no personal offense or criticism, and am sure neither did anyone else. What was being suggested by myself and others was to check that you were following ‘best-practices’ ( an industry term for how things ‘need to be done’ in order to achieve correct results), it’s nothing personal.

As Paul said, CSS works the way CSS works which is some, if not many times , counter intuitive until you actually understand how it works. For example: the HEIGHT of the patron element is set by the sum of the HEIGHTs of the children, unless you set specific height for the parent. So if you try to set the height of the children as a fraction of the parent it creates an inline loop of sorts: the parent doesn’t know what height it should be, until the children tell it so, and the children can’t set their height until the parent knows its height.

As far a ‘all caps’ go, I can’t speak for anyone else, but when I do it am usually trying to make my answer scannable, it’s not yelling nor a show of frustration , sorry if it seemed that way. It’s usually done to emphasise TAGS or PROPERTIES ( sometimes myself or other people use class notion too DIV.someclass)

No question is stupid, but you have to give the smart answers a chance :slight_smile: even if they seem contrary to your current path. It’s my experience thought close to a decade of coming to this community for answers, that the SitePoint staff and volunteers are nothing if not patient, helpful and knowledgable ( yeah… sound like and ad but it’s true). I am sure you will find the same if you give it a fair chance. :slight_smile:

8 Likes

I’m actually working on this problem because i hate using table for some reason and i love flexbox sooo much but i’m afraid of its compatibility so i started on making a mini CSS library that mimics the features of flexbox like centering vertically and horizontally(both are my reason why i love flexbox), space-between, around, grow, shrink, direction, etc. I’ll update you soon enough.

It is very well supported now, and where it is not, you can provide fallbacks like giving the flex children display: inline-block, it won’t be exactly the same for them, but at least functional.

2 Likes

Thanks! Good to hear, looks like more green than i last checked.
Well i think it’s safe to say i’ll not give a single damn to those ie 9 users and below.

I’m making less effort for them. I’ll make things function and display in a usable way, but if it’s not exactly like it is in a new browser, that’s not a problem for me. They just get a “no-thrills” version.
If you pander to their every need, they will never upgrade to a decent browser.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.