CSS - Align Text, Input and Image in DIV - html

Question

I'm trying to align some text, and input field and an image which is approx 25x25 px
What I get is the text and Image at the top of the div and the input slightly lower down.
How do I align them so they are all vertically level with each other.
This is what I have so far:
div.block {overflow:hidden; border:1px solid #000 }
div.block label {width:150px; display:block; float:left; text-align:left; vertical-align:middle; }
div.block.input {margin-left:4px; float:left; vertical-align:middle; }
https://jsfiddle.net/a3cmfpzL/
Thanks

Answer 1

This is for Horizontal:
.block{
display:flex;
}
label{
border:1px solid red;
}
img{
height:25px;
width:25px;
}
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890'/>
<img src='http://placekitten.com/301/301'/>
</div>
If you're looking for Vertical direction then:
*{
border:0;
padding:0;
}
.block{
display:flex;
flex-direction:column;
}
label{
border:1px solid red;
width:100px;
}
img{
height:25px;
width:25px;
}
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890'/>
<img src='http://placekitten.com/301/301'/>
</div>

Answer 2

I would strongly advise you to use flexbox.
Can be a bit confusing at the beginning, but once you get the hang of it, you'll love it.
Here you can find a perfect guide for using it.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Something like this (just written out of my mind, so untested)
Try removing your classes first.
Your CSS
.flex {
display: flex;
flex-direction: column;
justify-content: space-between; // only use this if you don't justify-self the elements
}
.border {
border:1px solid #000;
}
img {
width: 25px;
height: 25px;
justify-self: top; // if you don't use flex-direction on .flex
}
input {
justify-self: top; // if you don't use flex-direction on .flex
}
Your HTML
<div style="flex border">
<img src='image.png'/>
<label>Test Label</label>
<input type='text' value='1234567890'/>
</div>

Answer 3

Few Issues
This div.block.input isn't selecting anything so all those styles aren't being used
You made the label a block level element so it won't respond to the vertical-align property.
The <input> and the <img> are inline elements so they will share the same line box in which they live, Their vertical alignment will be set by the vertical-align property.
The default value for vertical-align property is baseline:
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
In this case we have an <img> which doesn't have a baseline, So it will be aligned based on it's bottom margin, in our case the img have no margin so it's basically the bottom edge.
The <input> However have a baseline, So it's baseline will be aligned with the bottom edge of the img next to it.
DEMO
div.block {
overflow: hidden;
border: 1px solid #000
}
div.block label {
width: 150px;
display: block;
float: left;
text-align: left;
vertical-align: middle;
}
div.block.input {
margin-left: 4px;
float: left;
vertical-align: middle;
}
div {
position: relative;
}
div:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(red, red) 0 24.5px/ 100% 1px no-repeat
}
<p>red line is the baseline</p>
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890' />
<img src='https://i.picsum.photos/id/527/25/25.jpg' />
</div>
Solutions
I cleaned the code a bit and remove unnecessary styles.
Floats aren't necessary
If you to apply a width to the label use display:inline-block; instead
1) vertical-align: middle;
* {
padding: 0;
margin: 0;
}
div.block {
overflow: hidden;
border: 1px solid #000
}
label {
width: 150px;
display: inline-block;
vertical-align: middle;
background: brown;
}
input {
vertical-align: middle;
border: 0;
background: red;
}
img {
vertical-align: middle;
}
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890' />
<img src='https://i.picsum.photos/id/527/25/25.jpg' />
</div>
Items will be aligned relative to middle of the tallest item which is the img.
2) If you want elements to share the same height
Knowing the <img> is the tallest and it's height, we can simple apply that same height to the other elements, We still need to apply vertical-align:top to align the elements based on their top edge instead of the baseline
* {
padding: 0;
margin: 0;
/* because we defined a height on the element,
we need to ensure that any extra space should be
calculated within that height */
box-sizing: border-box;
}
div.block {
overflow: hidden;
border: 1px solid #000;
font-size:0;
}
label {
display: inline-block;
width: 150px;
height: 25px;
font-size:16px;
vertical-align: top;
line-height:25px;
background:brown;
}
input {
height: 25px;
vertical-align: top;
border:0;
background:red;
}
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890' />
<img src='https://i.picsum.photos/id/527/25/25.jpg' />
</div>
3) Flexbox
Which is the simplest and i won't be covering because it have been covered in other answers.

Answer 4

Try adding position:absolute and display:flex inside your div.block.
That should do the trick if I understand your question correctly.