How do I keep a ul li block always align in the middle when a parent box resizes

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.

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):

 

You can add a stlyle here <li style:"something">

 

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.

 

Then add ids on Li. <li id="1"> then vis css .1 {style}

 

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).

 

Thanks @hdewantara

It seems to be working.

 

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):

 

Make the ul {display: table; margin: 1em auto;}
Display: table causes ul to shrink-wrap its content, then margin: auto centers it.

cheers,

gary

 

Oops, I answered a question, but not the one you asked. My bad.
cheers,

gary

 

Hi,

Thanks for the inputs. I'll test them all to see what is the best.