Chcę dodać w css top: x vh;, gdzie x to 50% div. W js obliczyłem potrzebną wysokość:

var section = document.getElementById('section1').offsetHeight;
var lastdiv = document.getElementById('segment2-slide1').offsetHeight;
var HeightINeed = section-lastdiv;

Jak mogę manipulować zmienną z js, aby uzyskać 50% proporcji (wyrównanie w pionie, ale nie wszystkich nadrzędnych div) w css?

0
Pavel Prodan 19 grudzień 2019, 21:11
Pokaż swój html!
 – 
DCR
19 grudzień 2019, 21:37

1 odpowiedź

Jedynym (i najlepszym sposobem między przeglądarkami), jaki znam, jest użycie pomocnika inline-block z wysokością: 100% i wyrównaniem w pionie: do środka na obu elementach.

Jest więc rozwiązanie: http://jsfiddle.net/kizu/4RPFa/4570/ Jak wyrównać w pionie obraz wewnątrz div

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>
.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
-1
Max 19 grudzień 2019, 21:25