1

I would like to center both vertically and horizontally the text "apple". I tried every solution already proposed (an inner div, vertical-align, margin:auto...) I just don't get it.

http://jsfiddle.net/0jkdLr84/3/

I think that the problem is located below.

#distance
{
 height:20%; 
 text-align: center;
 vertical-align: middle;
 font-size: 2em;
}

Thanks.

antoine
  • 115
  • 7
  • Also have a look at http://css-tricks.com/centering-css-complete-guide/ – Hashem Qolami Sep 09 '14 at 16:55
  • This question has been discussed couple of times on SO and there are answers which at least one of them would meet your needs. However I'll show you [one of them](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474) in action: http://jsfiddle.net/hashem/0jkdLr84/16/ – Hashem Qolami Sep 09 '14 at 17:35

2 Answers2

0

This should work:

#distance
{
    height:20%; 
    text-align: center;
    margin-top: 10%;
    font-size: 2em;
}
Ajk_P
  • 1,874
  • 18
  • 23
  • it doesn't work, the height will be over 100 and a scrolling bar will appear and i don't want to do that. :) – antoine Sep 09 '14 at 16:25
0

JSFiddle - DEMO or SHOW

You need an extra div to warp your div#distance tag.

HTML:

<body>
    <div id="leftSide">
        <p>orange</p>
    </div>
    <div id="rightSide">
        <div class="div-p">
            <div id="distance">apple</div>
        </div>
        <div id="googleMap"></div>
    </div>
</body>

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%
}
.div-p {
    height: 20%;
    text-align: center;
    font-size: 2em;
    display: table;
    width: 100%;
}
body {
    width:100%;
    margin:0;
    display:table;
    border-collapse:collapse;
    table-layout:fixed;
}
#leftSide {
    display:table-cell;
    vertical-align:middle;
    width:2em;
    font-size:4em;
    padding:0;
    overflow:hidden;
    background-image: url('eiffeltower.jpg');
}
#leftSide p {
    display:table;
    text-indent:1.75em;
    white-space:nowrap;
    transform:rotate(-90deg) translate(-50%, 0);
    transform-origin:1em center;
}
#rightSide {
    height: 100%;
    margin:0;
    padding:0;
}
#distance {
    display: table-cell;
    vertical-align: middle;
}
#googleMap {
    height:80%;
    background-color: yellow;
}
Anonymous
  • 10,002
  • 3
  • 23
  • 39