0

I have this structure (simplified):

<div id="outer" style="display: table-cell">
  <div id ="someOtherDiv">.......</div>
  <div id="inner" style="text-align: center; vertical-align: middle">
    <img src="path" />
  </div>
</div>

I need IMG to be centered both vertically and horizontally.

Image is centered only horizontally but vertically in screen.

What else should I add to accomplish this?

Of course, if I set BODY to be 100% height, and then inner div to be also 100% height it works, but the fact is that I cannot actually add 100% height to BODY tag, so I need to do this only changing some style to INNER div.

I thought if OUTER div is table cell, ideally, vertical align style should work, but it doesn't. In fact, when using Firebug, I can see that OUTER div expands to all screen and INNER div only ocuppies the IMG space.

Any suggestion?

jstuardo
  • 3,901
  • 14
  • 61
  • 136
  • must the `div#outer` has `table-cell` as display? – yqlim Sep 14 '18 at 12:26
  • @YongQuan yes... this belongs to a backend template (found here: https://colorlib.com/polygon/sufee/forms-advanced.html). if I remove the table-cell style, whole template stops working... so I should limit only to modify content part of right panel. Also... if I add height 100% to BODY, the page expands vertically appearing scroll bar. – jstuardo Sep 14 '18 at 12:30
  • what about `display: table-cell` too in `div#inner` – yqlim Sep 14 '18 at 12:40

1 Answers1

-1
...
<div id="inner" class="flexbox; align-items: center">
  <img src="" class="vertical-align: middle"/>

Perhaps using flexbox and align-items for the inner div and then align the img vertically in the img tag. But also consider width, padding, and height for settings to control the maximum much space the images need.

jpt
  • 1
  • 1
  • it does not work.... by the way.. I corrected the question.... I have written "class" instead of "style".... however, the problem, I think, is that inner DIV is not expanded vertically, to occupy the whole parent height (OUTER div) – jstuardo Sep 14 '18 at 12:57
  • Sure. Perhaps a design more like this one could work: https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically?rq=1 – jpt Sep 14 '18 at 14:01