Why is the DIV with Blue background falling out of vertical alignment with other DIVs in the same line with:
display: inline-block;
when one just adds Text to it!!!
And what to do to get it back in same vertical position as other DIVs before and after it?
And then how does one get the Text in the Blue DIV to be vertically align inside that Blue DIV?
The default alignment of inline and inline-block elements is baseline.
Anytime one uses “inline” or “inline-block”, he should consider the vertical alignment of the elements. Personally, when I assign “inline-block” to an element, I routinely include “vertical-align:…”
Just to be obnoxious, I am including a CSS display:table/table-cell solution because the code is similar to yours only simplified, I changed the IDs to classes. Please read the comments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- A character set should be decalared here! -->
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- if needed for a responsive page -->
<link rel="stylesheet" href="css/stylesheet.css"> <!-- if needed for an external stylesheet -->
<title>template</title> <!-- A TITLE is REQUIRED! -->
<!--
Nothing should be above the DOCTYPE, not even empty space, except a PHP declaration IF NEEDED.
https://www.sitepoint.com/community/t/why-is-the-div-with-display-inline-block-falling-out-of-place/274861
WorldNews
-->
<style>
html {box-sizing:border-box;}
*,*:before,*:after {box-sizing:inherit;}
body {
padding:0 1%;
margin:0;
}
.continer {
display:table;
width:100%;
border:3px solid gray;
margin-top:25px;
}
.holder {
display:table-cell;
vertical-align:middle;
width:25%; /* may vary as needed by the content */
height:100px; /* treated as min-height */
text-align:center;
border:1px solid purple;
color:white;
}
.red {background-color:#FF0000;}
.blue {background-color:#0000FF;}
.yellow {background-color:#E2BE22;}
.green {background-color:#008800;}
.tesy {
border:1px solid red;
width:300px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="continer">
<div class="holder red"></div>
<div class="holder blue">Hello World</div>
<div class="holder yellow"></div>
<div class="holder green">
<p class="tesy">So far, we've built web pages using HTML and styled them using CSS. Our pages look great, but they're not interactive �we can't drag elements around the page, open and close sliding panels, animate HTML elements, or add new elements to our HTML pages simply by clicking a button.</p>
</div>
</div>
<div class="continer">
<div class="holder red"></div><div class="holder blue"></div><div class="holder yellow"></div><div class="holder green"></div>
</div>
</body>
</html>
Coot,
That suggestion did work fine.
But this again demonstrates the bizarre illogical workings of the CSS.
And no rational way of reading to address these illogical workings.
I mean why in GODs name, should a DIV with display: inline-block; falls out of vertical position by just adding text to it! What sort of logic is that?
Sorry, I am just blowing steam But I think rightly so.
ronpat, sorry but in NO way or how does reading the page: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
lead one to the realization that adding:
vertical-align: top; to a DIV with display: inline-block;
would lead to that DIV into going back into its normal placement. Not even close.
And again this is the example of total lack of good documentation about advance CSS issues, beside CSS being illogical in regard to these advance issues.
But I think rightly so.