CSS vertical allign is working only when span given

Question

a {
    display: block;
    padding: 0 10px;
    /* background: rgba(0,0,0,0.5); */
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.1);
    text-decoration: none;
    color: white;
    background-color:rgba(0,0,0,0.5);
    height:100px;
}

img {
    max-height: 72px;
    max-width: 598;
    margin: 0;
    padding: 0;
        vertical-align: middle;
            width: 40px;
    height: 40px;
        border-radius: 50%;

}

.img_frame {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
        background-color: black;

}

<a href="">
  <span class="img_frame"></span>
  <img class="size-40X40 img-round" src="https://yt3.ggpht.com/-zvxnrUIYjg8/AAAAAAAAAAI/AAAAAAAAAAA/vnVVaPAvxOE/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">  
</a>

If I am removing span tag, image is not coming to center, and if I replace span with any other tag like p tag, then also same problem...

Please explain about these properties... Thanks in advance

Do you know the difference between `inline` and `block` level elements? You should. — Mohammad Usman, May 25 '17 at 07:18
span elements are basically in-line and usually used for a small chunk. But p tag will take a whole line space. — Vishnu, May 25 '17 at 07:18
my doubt is why without span tag,image is not coming to center — Abhishek, May 25 '17 at 07:22
Check this [Question](https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Mohammad Usman, May 25 '17 at 07:23
`vertical-align` property applies to `inline` and `inline-block` elements. — zer00ne, May 25 '17 at 07:32

Super User · Accepted Answer · 2017-05-25T07:29:49.340

vertical-align on inline / inline-block element, images, text... align element together, not with parent.,
You can use flexbox for this, check updated snippet below..

a{
    display: block;
    padding: 0 10px;
    /* background: rgba(0,0,0,0.5); */
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.1);
    text-decoration: none;
    color: white;
    background-color:rgba(0,0,0,0.5);
    height:100px;
    display: flex;
    align-items: center;
}
img{
    max-height: 72px;
    max-width: 598;
    margin: 0;
    padding: 0;
        vertical-align: middle;
            width: 40px;
    height: 40px;
        border-radius: 50%;

}

.img_frame {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
        background-color: black;

}

<a href="">
  
  <img class="size-40X40 img-round" src="https://yt3.ggpht.com/-zvxnrUIYjg8/AAAAAAAAAAI/AAAAAAAAAAA/vnVVaPAvxOE/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">  
</a>

thank you,but why without span image is not coming to center though given vertical-align middle — Abhishek, May 25 '17 at 07:23
`Vertical-align` on `inline / inline-block` element, images, text... align element together, not with parent. — Super User, May 25 '17 at 07:28

Ehsan · Answer 2 · 2017-05-25T09:33:01.940

The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. , ) or inline-block (e.g. as set by the display property) elements.

Read More :https://css-tricks.com/almanac/properties/v/vertical-align/

In simple terms ,vertical-align property Specifies how be position inline(or inline-block) Elements relation to each other.

you have one image and need a other element like span with height: 100%;. Span element have role a Helper.

span {vertical-align: middle;} and img {vertical-align: middle;} say : Center both elements must be on the same line.

a {
    display: block;
    padding: 0 10px;
    /* background: rgba(0,0,0,0.5); */
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.1);
    text-decoration: none;
    color: white;
    background-color:rgba(0,0,0,0.5);
    height:100px;
}

img {

    max-height: 72px;
    max-width: 598;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 50%;

}

.helper {

    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

<a href="#">

    <span class="helper"></span>
    
    <img class="size-40X40 img-round" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSJoLHGrCss93oyQO7wXQr02WZbL83EiJFxza5pe-gN3o_jaK7jw">
    
</a>

CSS vertical allign is working only when span given

2 Answers2