very common question I know, but I'm still struggling having read similar questions.
I have two divs (containing a variable height text box paragraph and a fixed height image) within a container div, as follows:
<div class="error-row row">
<div class="error-value-col">
<p class="error-value">{{error.message}}</p>
</div>
<a class="cross-link">
<img class="cross" src="/assets/cross.png" alt="close">
</a>
</div>
The accompanying LESS file is:
.error-row {
border: 1px solid @po-yellow;
border-width: 0px 1px 1px 1px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
margin: 0px;
.error-value-col {
float:left;
vertical-align: middle;
display: inline-block;
width: calc(~'100% - 70px');
.error-value {
font-size: 10px;
padding: 5px;
p {
margin-bottom: 0px;
}
}
}
.cross-link {
padding: 0px;
float: right;
vertical-align: middle;
display: inline-block;
height: 70px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 28.5px 27.5px 26.5px 27.5px;
color: black;
}
}
}
I've tried several different combinations of settings but none seem to work. I want whatever the element with the smallest height is (out of the image and text box) to centre alongside the taller element.
Thanks all.
EDIT: Clarification...I want the error-value-col
and cross-link
to be centred on the error-row
container. This will of course be sized to the largest element out of the two, which could be either.
I changed approach and use display:table
and display:table-cell
to obtain desired behaviour. Look at this updated jsFiddle to see if it's acceptable for you (converted LESS in CSS there).
Apart design rules, relevant new ones to LESS code are the following:
.error-row {
...
display:table;
width:100%;
.error-value-col {
...
display:table-cell;
vertical-align:middle;
.error-value {
...
p {
...
}
}
}
.cross-link {
...
display:table-cell;
width:70px;
vertical-align:middle;
img.cross {
...
}
}
}
Please refer to jsFiddle to see all differences including erasing of floating.
ALTERNATIVES :
top:50%
but due to fact that reference point is top-left corner, then you have to push up it of " half of its height " with a negative margin-top
. This requires to have a fixed height of inner DIV, in order to set this negative margin to half of it.
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.