简体   繁体   中英

make two inner boxes vertically aligned center in the effective way?

 .dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d3{ height:40px; width:30px; border:1px solid yellow; display:inline-block; } 
 <div class="dd"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> 

In my project, i always cannot find a good way to vertically elements. Anyone has good points in making elements(any circustances) vertically aligned?

My own stupid way:

when the out div do not have height, then it's easier for me , i often make the margin-top eaquls the margin-bottom, and it's vertically aligned like this:

 .dd{ height:auto; width:100%; background:#000; } .dd>div:first-child{ display:inline-block; margin-top:1em; margin-bottom:1em; height:80px; width:50px; border:1px solid red; margin-left:1em; } .dd>div:last-child{ display:inline-block; margin-top:1em; margin-bottom:1em; height:50px; width:50px; border:1px solid green; } 
 <div class="dd"> <div></div> <div></div> </div> 

but in this case, i cannot find a good practice for now, anyone have an idea?

SECOND ADDED

And i change my stupid way:

.dd>div:first-child{height:50px }

to

.dd>div:first-child{height:80px }

seems that my stupid way did work either unless you change height:80px back to height:50px

About what i am about to achieve is that I want the innerDivs(inline-block) to place in the center(vertically) of the fixed-height outer div(that's, i wanna make the inner divs' margin-top and margin-bottom to be equal)

Please do make more expanationation here so we can understand why it can work,thanks

Try using this:

.dd {
    display: flex;
    align-items: center;
}

This way any items within the .dd container will be vertically centered. If you want everything horizontally centered as well then write:

justify-content: center;

EDIT Note: this works nonetheless the height of the elements within the flex container.

According to this document , in CSS2 you can use the table-cell display and the vertical-align property, but I'm not a big fan of this kind of code.

This is a fiddle of the code using that: https://jsfiddle.net/Laf2wv4n/1/

  • I have use :pseudo element :before of the parent ie dd to vertically align the inner elements

  • Every inline element can the vertically centre using vertical-align:middle

I have used pseudo element so that it can be used as a inline-block element with 100% height of the parent

 .dd { height: 100px; width: 100%; border: 1px soild red; background: #000; } /* added to vertiaclly align the elements inside */ .dd:before { content: ''; height: 100%; /* set the height of the element to 100% so that the inner elements can align to its full height */ display: inline-block; /* this is the property which is need to vertically center */ width: 1px; /* set the width to 1px */ margin-left: -1px; /* so that the width doesnt effect the children */ vertical-align: middle; /* is added to vertically align the elements */ } .dd div { vertical-align: middle; /* is added to vertically align the elements */ } /* end */ .dd .d1 { height: 20px; width: 20px; border: 1px solid green; display: inline-block; } .dd .d2 { height: 20px; width: 20px; border: 1px solid green; display: inline-block; } .dd .d3 { height: 40px; width: 30px; border: 1px solid yellow; display: inline-block; } 
 <div class="dd"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> 

Vertical aligning text or blocks is very old and known html/css problem. Through years raised many solutions which depends of browsers functionality and initial conditions (text or block, known or not height of elements etc).

Chris Coyier tried to gather all technique in one complete guide on its own website and categorized them by most often use cases.

Centering in CSS: A Complete Guide

My favorites are most modern methods by now: flexbox and aligning through transform: translateY(-50%) rule. They are the most concise and bright.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM