Why vertical-align does not work in this specific example - html

Why does Vertical-align not work on the element I am trying to align? But works if I align other elements around it?
I have read few articles on vertical align, which state that it was created to align tables or inline elements.
Hence I set all my elements as inline-block, in the code.
When I try to vertical-align the menu links, it does relatively nothing.
If I try to align 1 box to the left or right of menu links it will push down the menu.
But if I vertical-align both boxes at once, the text gets aligned.
What does this happen, how am I supposed to use vertical-align, or am I not supposed to use it anymore?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlexPractice</title>
<link rel="stylesheet" href="practiceflex.css">
</head>
<body>
<nav class="container">
<div class="logo">
<div class="box" id="box1"> </div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Our mission</li>
<li>Services</li>
<li>About Us</li>
<li>Leave a comment</li>
</ul>
</div>
<div class="profilepic">
<div class="box" id="box2"> </div>
</div>
</nav>
</body>
</html>
html,body{
padding:0px;
margin:0px;
}
.box{
width: 48px;
height:50px;
background: red;
}
.menu > ul > li{
text-decoration: none;
display:inline;
margin-right:20px;
}
.container
{
display:inline-block;
/* vertical-align: middle;*/
}
.container * {
display:inline-block;
/* vertical-align: middle;*/
}
/*
#box1{
vertical-align: middle;
}
#box2{
vertical-align: middle;
}*/
https://jsfiddle.net/curiousproger/gurmL8f9/


Refer to MDN docs vertical-align. One use case is indeed for table-cells, the other is, as stated on MDN:
To vertically align an inline element's box inside its containing line box (emphasis mine)
This means 2 things:
vertical-align will only affect elements with display: inline or display: inline-block
the line-height property of the parent, and of any children may greatly influence the resulting alignments of all elements involved.
With extra levels of nesting, line-height being important for text alignment and line breaks, vertical-align is best used for inline content like paragraph text, images, icons, footnote references etc. For vertically centering block-level elements (like a navigation) it is much safer to use display: flex; align-items: center; on the parent
For illustration purposes of potential problems I included some test cases below.
[id^="case"] { border: 1px solid; height: 50px; }
code { display: inline-block; }
.box {
display: inline-block;
width: 32px;
height: 32px;
background: red;
vertical-align: middle;
}
#case-2, #case-3 {
line-height: 50px;
}
#case-3 code {
line-height: 100px;
vertical-align: middle;
}
#case-3 .box {
line-height: 20px;
vertical-align: middle;
}
<h2>vertical-align tests</h2>
<div id="case-1">
<span class="box"></span>
<code>#case-1</code>
<span class="box"></span>
</div>
<div id="case-2">
<span class="box"></span>
<code>#case-2</code>
<span class="box"></span>
</div>
<div id="case-3" style="line-height: 0;">
<span class="box"></span>
<code>#case-3</code>
<span class="box"></span>
</div>
<h2>Flexbox</h2>
<div id="case-4" style="display: flex; align-items: center;">
<span class="box"></span>
<code>#case-3</code>
<span class="box"></span>
</div>


The vertical alignment default setting (i.e. if you don't define anything else) is baseline, which is the baseline of the last line of text inside an element. If there is no text, it's the bottom border instead.
In this variation of your fiddle the first box (no text) is aligned to the baseline of the text elements by its bottom border, in the other box (containing text now) the last text line is aligned to the other text elements:
https://jsfiddle.net/x3q0v5ab/
Note: I didn't change the CSS, i only put some text into the second block.
So if you use a vertical-align setting other than baseline, use the same on both blocks.

Related

Html css Card aligment

I need to show the image in the right side of card how can i do this ? not by margin-left because If title size is more then the image will show in next line
<div class="block_container1">
<div class="tit" *ngFor="let c of cdata">{{c.name}}</div>
<div style="text-align: right;"><img src="assets/imgs/32.png"></div>
</div>
.block_container1 > div {
display: inline-block;
vertical-align: middle;
}

The <div> element containing the <img> element could be set to float to the right by making use of the CSS property float: right;. Keep in mind to clear the float property for the next <div> element.For proper alignment use line-height for your <div> elements
Below is a working snippet:
.block_container1>div {
display: inline-block;
vertical-align: middle;
}
.tit {
line-height: 38px
}
.myImg {
float: right;
line-height: 38px
}
<div class="block_container1">
<div class="tit" *ngFor="let c of cdata">hello</div>
<div class="myImg"><img src="https://www.w3schools.com/tags/smiley.gif"></div>
</div>

One way would be to make the image the background of your block_container1 class, mark the background-position as "top right", and make sure it doesn't repeat:
.example {
min-height:500px;
background-image:url('https://cdn3.iconfinder.com/data/icons/fabric-features-clothes-materials-glyph/64/41_design-sample-color-palette-128.png');
background-repeat:no-repeat;
background-position:top right;
margin:40px;
}
<div class="example">
<h2>Example</h2>
This is an example.
</div>
You can add padding around the image by giving .block_container1 a margin. You can learn more about background positions here.

Try the flexbox approach:
.block_container {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="block_container1">
<div class="tit" *ngFor="let c of cdata">{{c.name}}</div>
<div style="text-align: right;"><img src="assets/imgs/32.png"></div>
</div>

Vertically Aligning Text & Image [duplicate]

Why won't vertical-align: middle work? And yet, vertical-align: top does work.
span{
vertical-align: middle;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
<span style="">Works.</span>
</div>
Tested in FF3.
Now you can use flexbox for this type of layout.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://via.placeholder.com/60x60">
<span style="">Works.</span>
</div>

Here are some simple techniques for vertical-align:
One-line vertical-align:middle
This one is easy: set the line-height of the text element to equal that of the container
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align:bottom
Absolutely position an inner div relative to its container
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align:middle
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
If you must support ancient versions of IE <= 7
In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Variable container height vertical-align:middle
This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)
Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:
position: relative;
top: 50%;
transform: translateY(-50%);

Change your div into a flex container:
div { display: flex; }
Now there are two methods to center the alignments for all the content:
Method 1:
div { align-items: center; }
DEMO
Method 2:
div * { margin: auto 0; }
DEMO
Try different width and height values on the img and different font size values on the span and you'll see they always remain in the middle of the container.

You have to apply vertical-align: middle to both elements to have it been centered perfectly.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:
On the left, the text is not aligned, on the right it is as shown above. A live demo can be found in this article about vertical-align.
Has anyone talked about why vertical-align: top works in the scenario? The image in the question is probably taller than the text and thus defines the top edge of the line box. vertical-align: top on the span element then just positions it at the top of the line box.
The main difference in behavior between vertical-align: middle and top is that the first moves elements relative to the box's baseline (which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable) and the second relative to the outer bounds of the line box (which is more tangible).

The technique used in the accepted answer works only for single-lined text (demo), but not multi-line text (demo) - as noted there.
If anyone needs to vertically center multi-lined text to an image, here are a few ways
(Methods 1 and 2 inspired by this CSS-Tricks article)
Method #1: CSS tables (FIDDLE) (IE8+ (caniuse))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Method #2: Pseudo element on container (FIDDLE) (IE8+)
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
Method #3: Flexbox (FIDDLE) (caniuse)
CSS (The above fiddle contains vendor prefixes):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}

This code works in IE as well as FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>

Because you have to set the line-height to the height of the div for this to work

For the record, alignment "commands" shouldn't work on a SPAN, because it is an in-line tag, not a block-level tag. Things like alignment, margin, padding, etc won't work on an in-line tag because the point of inline is not to disrupt the text flow.
CSS divides HTML tags up into two groups: in-line and block-level. Search "css block vs inline" and a great article shows up...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Understanding core CSS principles is a key to it not being quite so annoying)

Basically, you'll have to get down to CSS3.
-moz-box-align: center;
-webkit-box-align: center;

Use line-height:30px for the span so that text is align with the image:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>

Another thing you can do is set the text's line-height to the size of the images within the <div>. Then set the images to vertical-align: middle;
That's seriously the easiest way.

Haven't seen a solution with margin in any of these answers yet, so here is my solution to this problem.
This solution only works if you know the width of your image.
The HTML
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
The CSS
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

Write these span properties
span{
display:inline-block;
vertical-align:middle;
}
Use display:inline-block; When you use vertical-align property.Those are assosiated properties

background:url(../images/red_bullet.jpg) left 3px no-repeat;
I generally use 3px in place of top. By increasing/decreasing that value, the image can be changed to the required height.

You can set image as inline element using display property
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Using flex property in css.
To align text vertically center by using in flex using align-items:center; if you want to align text horizontally center by using in flex using justify-content:center;.
div{
display: flex;
align-items: center;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>
Using table-cell in css.
div{
display: table;
}
div *{
display: table-cell;
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>

On a button in jQuery mobile, for instance, you can tweak it a bit by applying this style to the image:
.btn-image {
vertical-align:middle;
margin:0 0 3px 0;
}

Multiline solution:
http://jsfiddle.net/zH58L/6/
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Works in all browers and ie9+

It can be confusing, I agree. Try utilizing table features. I use this simple CSS trick to position modals at the center of the webpage. It has large browser support:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
and CSS part:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Note that you have to style and adjust the size of image and table container to make it work as you desire. Enjoy.

Display flex with align-items: center; is the best way for vertically align the items
div {
display: flex;
align-items: center;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>it works.</span>
</div>

div {
display: flex;
align-items: center;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>

Firstly inline CSS is not recommended at all, it really mess up your HTML.
For aligning image and span, you can simply do vertical-align:middle.
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Not sure as to why it doesn't render it on your navigation's browser, but I normally use an snippet like this when trying to display a header with an image and a centered text, hope it helps!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>

In 2022 and with nearly 96% unprefixed browser support, I'm surprised no one has suggested the use of a grid layout.
In this JSFiddle, 3 lines are all that are necessary to achieve the OP's objective (but multiple alignments are presented for comparison):
div {
display: grid;
grid-template-columns: min-content max-content;
align-items: center
}
An additional UI nicety would include the optional use of the gap property, which enables modulation of the space between each grid-item within the parent grid container (div).
Advantages of grid layout
Easy vertical AND horizontal alignment of grid-items
Modulation of space between grid-items
Any size image (using min-content) and text length (one line using max-content or wrapped (not shown in fiddle) using min-content) would work - no need to hard-code the image dimensions in the CSS (both usages demonstrated in the demonstrated in JSFiddle)
Modern approach
Disadvantages of grid layout
Older browser support is more challenging
Grid layouts generally require more experienced developers to implement properly - not as simple as block/inline-block display

<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
#media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
This is my sitename
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>

You probably want this:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
As others have suggested, try vertical-align on the image:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS isn't annoying. You just don't read the documentation. ;P

HTML - text at a center of a box

I am trying to set text at a center of a box when a number is not present, and when number is present text should go to top and number at the bottom.
I am able to show with number box correctly but without number box is vertical alignment does not work.
I am an HTML new bee.
Can someone help me here? I have looked at various articles and they point to using table cell and vertical alignment as middle. I tried that as well, I think the red box does not have text in the middle.
Here is an example.
http://jsfiddle.net/seohh5r1/2/
<!DOCTYPE html>
<html>
<head>
<style>
.alignleft {
float: left;
}
.alignright {
float: right;
}
.even-boxes,
.odd-boxes {
height : 52px;
width : 430px;
padding-left : 20px;
display : table-cell;
vertical-align : middle;
}
.odd-boxes {
background-color:#FFCCCC;
}
.even-boxes {
background-color:#CCEBFF;
}
.surname-entry {
font-size: 25px;
font-family:"Verdana";
}
.name-entry {
font-size: 18px;
font-family:"Verdana";
}
.another-entry {
font-size: 14px;
font-family:"Verdana";
}
.number-entry {
font-size: 32px;
font-family:"Verdana";
}
</style>
</head>
<body>
<div class="odd-boxes">
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<span class="number-entry alignright" style="margin-right:20px">K</span>
</div>
</div>
<div class="even-boxes">
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<span class="number-entry alignright" style="margin-right:20px">K</span>
<div class="another-entry">[1234567890101]</div>
</div>
</div>
</body>
</html>

And here is another way to align text vertically, this solution will work for a single line and multiple lines of text, but still requires a fixed height container:
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
The CSS just sizes the <div>, then vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and making the <span> an inline-block with vertical-align: center. Then it sets the line-height back to normal for the <span> so its contents will flow naturally inside the block.
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Demo Link
http://jsfiddle.net/CtH9k/

I misunderstood you earlier, try this again. If you are trying to vertically align elements
The span element must be moved out of the parent div hierarchy
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<div class="another-entry">[1234567890101]</div>
</div>
<span class="number-entry">K</span>
You need to add in additional css, the crucial one is display:inline-block to vertically align your inner elements
.odd-boxes, .even-boxes{
position:relative;
}
.odd-boxes>span, .even-boxes>span{
position:absolute;
right:20px;
top:0;
bottom:0;
margin:auto;
vertical-align:middle;
height:39px;/*height need to be specified*/
}
Also I've modified some of your css, you can refer to my version below:
http://codepen.io/vincentccw/pen/vOJVbX

Align images vertically (flush top), not flush bottom

I have a div tag, that contains images. The default seems to align images flush bottom, assuming different vertically sized images. How do I change the code, such that I get the images to align flush top?
Here is the complete HTML code.
CSS
#page {
position: relative;
padding: 0px 0px 0px 0px;
float: left;
border: none;
}
.divPortfolioImageRowFirst
{
display: table-row;
}
.divPortfolioImageCol1 {
vertical-align: top;
}
HTML
<div id="page">
<div>
<div id="divProductLogos">
<div class='divPortfolioImageRowFirst'>
<div class='divPortfolioImageCol1' style='line-height: 78px' id="divProductLogos_1">
<img style='margin-left: 0px;' src="./images/portfolio/ProductLogos_1.png"/>
<img style='margin-left: 15px;' src="./images/portfolio/ProductLogos_2.png"/>
</div>
</div>
</div>
</div>
</div>
The addition of "vertical-align: top;" and "line-height: 78px;" did not do the trick.
What did I forget / not do?

I think you want something like the following:
The HTML:
<div id="divProductLogos">
<div class='divPortfolioImageRowFirst'>
<div class='divPortfolioImageCol1'>
<img src="http://placekitten.com/150/200" />
<img src="http://placekitten.com/150/250" />
</div>
</div>
</div>
and the CSS:
.divPortfolioImageRowFirst {
border: 2px dotted gray;
padding: 10px;
}
.divPortfolioImageCol1 {
border: 1px dotted gray;
}
.divPortfolioImageCol1 img {
vertical-align: top;
}
Originally, you had too many floats affecting the layout, and that was causing some problems.
You could also use CSS table cells depending on other design considerations.
Demo fiddle: http://jsfiddle.net/audetwebdesign/9fhCS/
About the Vertical-align Property
The vertical-align property is not inherited, so it as to be applied to the inline elements that need to be adjusted. Specifying vertical-align on the parent container will not affect the child elements.
Reference: http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

First, valign isn't a valid property, you should use vertical-align: top;
You will also need to set line-height to the height of the tallest image.

Set inline-block divs to ignore line breaks

I have three divs that are side-by-side using display:inline-block.
If the divs are empty, they are at the same horizontal level.
As soon as I add <p> tags and some line breaks (<br/>) to the leftmost/first div, the rest are moved down.
If I put enough content in the second box, the third is moved down even more.
My HTML for the boxes:
<div class="main-box" id="about">
<h1>About</h1>
<p>This box has one paragraph of text, with line breaks</p>
</div>
<div id="login-container">
<div class="main-box" id="login">
<h1>Login</h1>
<p>Already a member? Sign in and see your stuff!</p>
</div>
<div class="main-box" id="signup">
<h1>Signup</h1>
<p>Create an account by filling out this form.</p>
</div>
</div>
The last two boxes are grouped in a div so that they "float" together.
My CSS:
div.main-box {
text-align: left;
display: inline-block;
border: 10px solid red;
margin: 20px;
padding: 25px;
border-radius: 50px;
width: 400px;
height: 400px;
}
div#login-container {
display: inline-block;
}

Just add:
vertical-align: top;
You can read about inline-block and some more details like IE7 fix and spacing in html code here.

Are you willing to use float: left instead of display: inline-block for the inside divs?
Another solution that I can think of is to create a class with float: left or display: table and applying it to the paragraph tags.