0

I have a div that I know the height. Inside there is a div that I don't know the height because it has text that can change. I found some solutions in Stackoverflow but it doesn't work for me or I am not using it correctly. Can anyone center the div small in this specific case? http://jsfiddle.net/JTTEM/2/

Lou Franco
  • 87,846
  • 14
  • 132
  • 192
Nrc
  • 9,577
  • 17
  • 67
  • 114
  • possible duplicate of [How to horizontal & vertical center a div?](http://stackoverflow.com/questions/4325643/how-to-horizontal-vertical-center-a-div) – Phrogz Apr 23 '12 at 15:33
  • definitely serious overlap with http://stackoverflow.com/a/6268813/773322 – b_dubb Apr 23 '12 at 17:14
  • I tried that options before but they don't solve my problem because I don't know the high of the div inside and I need absolute positioning in the div outside. So I think my case is different or I don't apply well that solutions? – Nrc Apr 25 '12 at 08:36
  • Sorry about my orthographic mistake. I'm from a small country in Europe. I'm trying to learn English. – Nrc Apr 25 '12 at 08:37
  • what do you want to happen if the inner div contains so much text that it begins to overflow the outer div? and will the outer div hold nothing but the inner div? no text or images? other tags? – b_dubb Apr 25 '12 at 21:12
  • It is like the example in the fiddle: the inner div will never be bigger than the outer div. The inner div contains just text. – Nrc Apr 26 '12 at 07:20

5 Answers5

1

Without javascript, floating the big, or tricks like display:table:

http://jsfiddle.net/JTTEM/10/

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • It works, but I don't understand why. I suppose the key point is #big1:after, #big2:after Can you explain that? – Nrc Apr 24 '12 at 15:50
  • 1
    Those are pseudo-elements; you can use them for anything. Mostly they're used for adding text, like counters, for chapter numbers etc. You can also give them borders, that appear extra in addition to the div's main one and so on. In this case, the trick is that just slapping `vertical-align` on the `small` all by itself does nothing; you can `vertical-align` an element only with elements on the same line. So by giving the `big:after` a height that is the same as the `big` itself, you can vertical-align it and the `small` with one another and they will have the same vertical center. – Mr Lister Apr 24 '12 at 16:07
0

have you tried any of the steps from Vertical Centering in CSS

TS-
  • 4,311
  • 8
  • 40
  • 52
  • I added in big: display: table; and in small: display: table-cell; vertical-align: middle;But it doesn't work: http://jsfiddle.net/JTTEM/5/ – Nrc Apr 23 '12 at 15:20
  • Did you notice they nest 3 divs? – TS- Apr 23 '12 at 15:30
  • I don't know how to apply this to my case. This is too complex for me. – Nrc Apr 25 '12 at 10:41
0

If you wanted to use JQuery, you could do...

(function(){
($('#big1 .small').css('margin-top',($('#big1').height() - $('#big1 .small').height())/2));

($('#big2 .small').css('margin-top',($('#big2').height() - $('#big2 .small').height())/2));
})();
HMartch
  • 728
  • 3
  • 12
  • I don't know understand. Can you apply this in my example? http://jsfiddle.net/JTTEM/2/ – Nrc Apr 25 '12 at 09:01
0

I modified your code a little bit: http://jsfiddle.net/JTTEM/8/

Firoz Ansari
  • 2,505
  • 1
  • 23
  • 36
  • I'm not sure if I understand. Why do you put clear: both; in the big? – Nrc Apr 23 '12 at 15:55
  • It only works if big is float. Is there any way in absolute position? – Nrc Apr 23 '12 at 16:11
  • Absolute position is an issue to vertically align .small layer. Default value of top attribute is set to 0 if you don't specify in your style sheet. If you can't refactor your HTML to remove absolute position, then javascript is only option as answered by redlena. – Firoz Ansari Apr 23 '12 at 16:32
0

You can do this in two ways.

  1. Using flex: Now flex property is supported by all the latest browsers. Using flex, justify-content and align-items properties on parent element will align the div at center irrespective of it's height.

body {
    font-family:Tahoma, Geneva, sans-serif;
    font-style: normal;
    font-variant: normal;
    color: #999999;
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    letter-spacing:1px;
}

p {
    padding: 10px;
    text-align: center;
}

#big1 {
    position:absolute;
    left:100px;
    top:100px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
    display:flex;
    align-items: center;
    justify-content: center;
}

#big2 {
    position:absolute;
    left:100px;
    top:400px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.small {
    position:absolute;
    /*left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);*/
    width:220px;
    background-color:#FFF;
}
<div id="big1">
    <div class="small"><p>some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more textsome more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text</p></div>
</div>

<div id="big2">
    <div class="small"><p>Some Text</p></div>
</div>
  1. Applying absolute position and transform property to it's children will align to center of it's parent element. This solution will work for all the modern browsers.

body {
    font-family:Tahoma, Geneva, sans-serif;
    font-style: normal;
    font-variant: normal;
    color: #999999;
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    letter-spacing:1px;
}

p {
    padding: 10px;
    text-align: center;
}

#big1 {
    position:absolute;
    left:100px;
    top:100px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
}

#big2 {
    position:absolute;
    left:100px;
    top:400px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
}

.small {
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width:220px;
    background-color:#FFF;
}
<div id="big1">
    <div class="small"><p>some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more textsome more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text</p></div>
</div>

<div id="big2">
    <div class="small"><p>Some Text</p></div>
</div>
Wazeed
  • 1
  • 3