Home/ Questions/Q 8873343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T18:26:31+00:00

it just starts to driving me nuts because I can not understand why vertical-align

  • 0

it just starts to driving me nuts because I can not understand why vertical-align of the following CSS template does work in an empty html file only:

<head>
<style>
        #mylist li {
                display: inline-block;
                list-style: none;
                text-align: center;
                height: 250px;
                padding: 5px;                   
        }
        #mylist .imgcont {
                height: 150px;
                width: 150px;
                line-height: 150px;
                border: 1px solid red;
                padding: 5px;
                overflow: hidden;       
        }
        #mylist img {
                height:120px;
                vertical-align:middle;
        }
</style>
</head>
<body>
<ul id="mylist">
    <li>
        <div class="imgcont">
          <img src="someimg.jpg" />
        </div>
    </li>
    <li>
        <div class="imgcont">
          <img src="anotherimg.jpg" />
        </div>
    </li>
</ul>
</body>
  • In an “empty” html, mean bare html template with <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">     at the top, vertical-align does apply and image is vertically centered in div container
  • When I do a verbatim copy and insert into more complex html (style in header tag, ul-list at the top of body tag) suddenly vertical-align is ignored and image is placed at top of the container. Simply can not understand what can make the difference here.

I even tried to prepend style “clear:both” but without an effect.

Any idea ?

UPDATE – added screenshots for both cases
vertical-align in plain html
above example merged with some complex html, vertical-align ignored

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You may find the below code if it helps, else please provide some screenshot for what you are getting and what you expect..

    #mylist .imgcont {
            height: 150px;
            width: 150px;
            line-height: 150px;
            border: 1px solid red;
            padding: 5px;
            overflow: hidden; 
            display:table-cell;
            vertical-align:middle;
            text-align:center;     
    }

    It gives me the below output:

    enter image description here

    • 0