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 do I keep a ul li block always align in the middle when a parent box resizes

Discussion in 'HTML & Website Design' started by ketting00, Jan 2, 2017.

  1. #1
    Hey guys,

    Please take a look at the image and help me out.

    I have a green parent div block with which height would expand and shrink regarding to the content of its grey child block. This good grey child would carry text, images, videos and so on.

    Then I have naughty adopted pink child which I would like to deal with. It should be a row of icons for the users to click. How d I achieve what I want. I've tried this http://stackoverflow.com/questions/3400548/how-to-vertically-align-li-elements-in-ul and this https://www.w3.org/wiki/CSS/Properties/vertical-align and they didn't work for me.
    SEMrush
    Here's the attempt so far:
    
    <div class=bigbox>
        <div class=box1>
            <p>
                Context goes here
            </p>
        </div>
        <div class=this_f_box>
            <ul>
                <li><img id="plus" src="images/plus.svg" /></li>
                <li><img id="minus" src="images/minus.svg" /></li>
                <li> | </li>
                <li><img id="more" src="images/more.svg" /></li>
            </ul>
        </div>
    </div> <!-- bigbox -->
    
    Code (markup):
    And the css:
    
    .this_f_box {
        float: right;
        text-align: right;
        display: table;
        height: 100%;
    }
    .this_f_box ul {
        display: table-cell;
        vertical-align: middle;
    }
    .this_f_box ul li {
        font-size: 1.4em;
    }
    
    Code (markup):
     

    Attached Files:

    • mid.png
      mid.png
      File size:
      4.2 KB
      Views:
      56
    Last edited: Jan 2, 2017
    ketting00, Jan 2, 2017 IP
    SEMrush
  2. Zoti Media Group

    Zoti Media Group Notable Member

    Messages:
    1,598
    Likes Received:
    113
    Best Answers:
    2
    Trophy Points:
    265
    Digital Goods:
    2
    #2
    You can add a stlyle here <li style:"something">
     
    Zoti Media Group, Jan 2, 2017 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    754
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Thanks for quick response.

    But I don't want to go it that way. Can you suggest something else? I would like to control it from the stylesheet.
     
    ketting00, Jan 2, 2017 IP
  4. Zoti Media Group

    Zoti Media Group Notable Member

    Messages:
    1,598
    Likes Received:
    113
    Best Answers:
    2
    Trophy Points:
    265
    Digital Goods:
    2
    #4
    Then add ids on Li. <li id="1"> then vis css .1 {style}
     
    Zoti Media Group, Jan 2, 2017 IP
  5. hdewantara

    hdewantara Well-Known Member

    Messages:
    519
    Likes Received:
    47
    Best Answers:
    23
    Trophy Points:
    130
    #5
    How about:
    .big_box{
       position: relative;
    }
    .this_f_box{
       position: absolute;
       right: 0;
       top: 50%;
       margin-top: -3em; /* arbitrary; this is half of .this_f_box height */
    }
    Code (CSS):
    .box1 may vary, but not .this_f_box. Correct? So I guess you can push .this_f_box to the middle (with top) and then pull it up as high as half of its height (with margin-top).
     
    Last edited: Jan 2, 2017
    hdewantara, Jan 2, 2017 IP
    ketting00 likes this.
  6. ketting00

    ketting00 Well-Known Member

    Messages:
    754
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #6
    ketting00, Jan 2, 2017 IP
  7. devcake

    devcake Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Hello ketting00,

    You could align a ul li in the middle when a parent box resizes without the absolute positioning.

    Just set the container's (.bigbox) text-align to justify and the inside child elements display to inline-block so they'll behave like inline elements and can be justified.
    The vertical-align: middle is there to make sure that if one of those elements will be higher than other, all elements will be aligned in the middle of the .bigbox container.

    The layout will work only with the :after pseudo element.
    It is required because of the justification specification: the last line in paragraphs is not justified.
    In your case that last line would be the line with the child elements. So you need to create a fake last line with :after pseudo element so the previous one (with child elements) will get justified.

    Here's the css:
    .bigbox {
      text-align: justify;
    }
    
    .bigbox:after {
      display: inline-block;
      width: 100%;
      content: '';
    }
    
    .box1,
    .this_f_box {
        display: inline-block;
        vertical-align: middle;
    }
    
    .this_f_box {
      text-align: right;
    }
    Code (CSS):
     
    devcake, Jan 5, 2017 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #8
    Make the ul {display: table; margin: 1em auto;}
    Display: table causes ul to shrink-wrap its content, then margin: auto centers it.

    cheers,

    gary
     
    kk5st, Jan 5, 2017 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Oops, I answered a question, but not the one you asked. My bad.
    cheers,

    gary
     
    kk5st, Jan 5, 2017 IP
  10. ketting00

    ketting00 Well-Known Member

    Messages:
    754
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #10
    Hi,

    Thanks for the inputs. I'll test them all to see what is the best.
     
    ketting00, Jan 5, 2017 IP