2

I have a problem which causes headache for me for hours now. I have the following html:

<ion-view class="menu-content" view-title="Postkarte">
    <ion-content>
        <div class="postcard-container">
            <div class="postcard">

            </div>
        </div>
    </ion-content>
</ion-view>

And the following css:

.postcard-container {
    display: table;
    position: absolute;
    background-color: yellow;
    height: 100%;
    width: 100%;
}

.postcard {
    display: table-cell;
    vertical-align: middle;
    background-position: center center;
    background-image: url("../img/frames/postcard_00.png");
    background-size: contain;
    background-repeat: no-repeat;
}

The result is this:

enter image description here

So the 100% width is working but the 100% height is ignored. Why?

connexo
  • 53,704
  • 14
  • 91
  • 128
Mulgard
  • 9,877
  • 34
  • 129
  • 232
  • 2
    Please provide full code that will allow us to reproduce the issue. This is likely due to the height (or lack of) of the element(s) containing it. – Hidden Hobbes Aug 25 '15 at 08:25
  • 1
    You will need to set the height of all parent elements to 100%. See this answer: http://stackoverflow.com/a/8464208/3751577 – Hexaholic Aug 25 '15 at 08:25
  • The problem is i dont know the css of the parent elements since they are from the ionic framework. – Mulgard Aug 25 '15 at 08:26
  • 2
    There is no way to control the `height` of a `table`. This includes elements that have `display: table;`. The height always adheres to the content. – connexo Aug 25 '15 at 08:27
  • @Mulgard, if you provide a full reproducible example we may be able to suggest some possible ways to tackle the problem. – Hidden Hobbes Aug 25 '15 at 08:27

1 Answers1

3

There is no way to control the height of a table. This includes elements that have display: table;. The height always adheres to the content in a table.

You will have to find some other method to achieve your vertical centering.

connexo
  • 53,704
  • 14
  • 91
  • 128