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