1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can i set vertical align inside a div which floats left on explorer 6 and 7

Discussion in 'CSS' started by macaela, Dec 17, 2011.

  1. #1
    Hi i have been 4 divs with a height set and now i am trying to set the text to be vertical align:middle but it is not working on explorer 6 and 7 is that even possible or should i just use some <br /> tags to align the text on each div to display align in the middle.

    I have found some that uses css top:50% but those just set line point to text to start which is not what i want i have attached an example of how i want to achieve with css that is if it is possible the more dirty option i am thinking is just to align with break tags each text within the divs


    thanks in advance
    forums.jpg
     
    macaela, Dec 17, 2011 IP
  2. Basti

    Basti Active Member

    Messages:
    627
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    90
    #2
    If your outter div container has a fixed height, use line-height

    
    <div class="outter">
       <div class="inner">
          text1<br />
          text2<br />
          text3
       </div>
    </div>
    
    Code (markup):
    
    .outter {
          height: 30px;
    }
    .inner {
          line-height: 30px;
    }
    
    Code (markup):
     
    Basti, Dec 18, 2011 IP
  3. macaela

    macaela Member

    Messages:
    174
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #3
    Thanks for the help unfortunaly line height just increases the gap bettwen the text if you look at my link the divs at bottom in red on firefox you'll see the text floats vertical:middle nicely but on ie7 and ie6 the vertical align doesnt work
    http://www.homeonfilm.com/builderstest.php
     
    macaela, Dec 18, 2011 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,429
    Likes Received:
    94
    Best Answers:
    7
    Trophy Points:
    0
    #4
    vertical-align is used to set alignment of inline content within that box, not to align text to a parent box. Setting line-height is not what you want either.

    I'm not giving this any thought at all cause you aren't supplying any markup but look into setting padding on the parent element.
     
    drhowarddrfine, Dec 18, 2011 IP
  5. Basti

    Basti Active Member

    Messages:
    627
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    90
    #5
    remove from the outter div the display: table; and vetical-align: middle;
    for the inner div, remove all 3 css value, and just use line-height: 160px;

    never had issues with this
     
    Basti, Dec 18, 2011 IP
  6. macaela

    macaela Member

    Messages:
    174
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #6
    Hi just removed all the above you mention but just looks horrible wrong this is how my css looks like
    .comments_outer {
    	float:left;
    	height:160px;
    	width: 206px;
    	border-bottom:2px solid red; 
    border-right:2px solid red;
    
    }
    .comments_inner { line-height: 160px;  }
    Code (markup):
    the HTML
            <div class="comments_outer">
            	<div class="comments_inner">
    				<p>"The quality of the product is first class,since adding a HDTV portal to our website our hits are up 4000 a month! 20 new instructions, with 20 new delighted clients deciding to have their home filmed in order to sell it,brilliant."</p>
                </div>
    		</div>
    Code (markup):
     
    macaela, Dec 18, 2011 IP
  7. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #7
    It is possible to "blindly" vertical centre (without a height on the content) in old IE browsers plus modern browsers, using the method of Paul O'Brien:
    http://pmob.co.uk/pob/hoz-vert-center.htm

    An example is below. Note that it needs extra markup (the inner2 and inner3 divs), plus styling for them, plus conditional comments directed to IE6-7 for them. Conversely, if IE6 & 7 are to be ignored, just delete the inner2 and inner3 divs, plus their styling and conditional comments.

    It seems like a lot to do just because IE6-7 don't understand display:table and display:table-cell, but it works. You can add or remove content from those inner <p> elements, and their content is always vertically centred, without ever having to put or change a height on them or their immediate parents.

    And as said above, setting the line height of an element equal to the height of its parent only allows vertical centring for 1 line of inline content, and does not work for block level elements.

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Test Vertical Centre</title>
    <style type="text/css">
    html, body { height: 100%; width: 100%; font-size: 100%; }
    #wrapper {
        width: 26em; 
        margin: 0 auto; 
        overflow: hidden;            
        font: 1em Arial, sans-serif; line-height: 1.1; 
    }
    .comments_outer {
        float:left;
        display: table; vertical-align: middle;
        height:12em;
        width: 12em;
        border:1px solid red;
    }
    .comments_inner {
        display:table-cell; vertical-align:middle;
    }
    .inner1  { 
        position:relative;
        left:50%; float:left; 
    }
    .inner2  { 
        position:relative; left: -50%;
        background-color: #ccc; 
    }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
        .inner1 { top:50% }
        .inner2 { top:-50%; }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="wrapper">
    
    <div class="comments_outer">
      <div class="comments_inner">
        <div class="inner1">
          <div class="inner2">
    
    <p>&quot;The quality of the product is first class,since adding a HDTV portal to our website our hits are up 4000 a month! 20 new instructions, with 20 new delighted clients deciding to have their home filmed in order to sell it,brilliant.&quot;</p>
    
          </div>
        </div>
      </div>
    </div>
    
    <div class="comments_outer">
      <div class="comments_inner">
        <div class="inner1">
          <div class="inner2">
    
    <p>&quot;The quality of the product is first class,since adding a HDTV portal to our website our hits are up 4000 a month!&quot;</p>
    
          </div>
        </div>
      </div>
    </div>
    
    </div>
    </body>
    </html>
    
    Code (markup):
     
    FilmFiddler, Dec 19, 2011 IP
  8. terier

    terier Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    2
    Trophy Points:
    0
    #8
    The valign tag is a bummer. Doesn't always work and doesn't work on all browsers.
    I suggest you use: float: left / right, and play with the margin and padding for the div and set specific browser definitions if needed with 'if IE' tag.
    Good luck
     
    terier, Dec 21, 2011 IP
  9. devilthemes

    devilthemes Member

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #9
    I hope in IE6 is not possible but in IE7 it can be possible

    div{display:table-cell; vertical-align:middle}. for compatible for IE6 you need to use some jquery stuff. You need to replace tag of div into table structure. So that your code will be in div and in ie6 get table structure.
     
    devilthemes, Dec 22, 2011 IP