Vertical-align: bottom nie działa
Myślałem, że vertical-align ma działać z elementami inline. Jednak z jakiegoś powodu wszystko w szarym div jest wyrównane do Góry , a nie do dołu.
<div style="position:absolute; top:130px; right: 80px; width: 230px; background-color:Gray; height:30px;" class="defaultText" id="pager">
<span style="vertical-align:bottom;">Page Size:</span>
<select style="vertical-align:bottom; font-size:8pt; margin-top: 0; margin-left:3px; height:16px; text-align:center;">
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="10000">*</option>
</select>
<div style="float:right;">
<span style="vertical-align:bottom; color:Blue; cursor: pointer; margin-right: 10px;"><</span>
<input style="vertical-align:bottom; height:12px; font-size:8pt; width: 20px;" type="text" data-bind="value: pageNum" />
<span style="vertical-align:bottom;"> of </span>
<span style="vertical-align:bottom;" data-bind="text: numPages"></span>
<span style="vertical-align:bottom; color:Blue; cursor: pointer; margin-left: 5px;">></span>
</div>
</div>
4 answers
Jeśli nie masz do czynienia z komórką tabeli, to funkcja vertical-align wyrównuje element względem sąsiednich elementów, w szczególności tekstu. Tak więc elementy w szarym div powinny być ułożone siebie, a nie na dole div. Zobacz przykłady na http://phrogz.net/css/vertical-align/index.html .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-14 17:23:31
Oto przykład, w którym możesz to osiągnąć za pomocą następującego kodu
DEMO: http://jsfiddle.net/SbNKa/1/
#theContainer {
height: 100px;
width: 500px;
position: relative;
border: 1px solid #900;
}
.content-bottom {
position: absolute;
width: 498px;
bottom: 0; /*This is the part that glues it to the bottom*/
border: 1px solid #000;
}
<div id="theContainer">
<div class="content-bottom">Content</div>
</div>
Oto nowoczesna, zaktualizowana odpowiedź za pomocą Flex boxów.
div {
height: 100%; // containing div must fill the full height of the parent div
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-17 04:09:16
Tutaj jest pęknięcie. Szukałam odpowiedzi (vertical-align
) a nie alternatywnej (bottom: 0
). Oto rozwiązanie.
vertical-align
jest ustawione względem swojego kontenera, a nie elementu nadrzędnego (lub wrapper
). Więc po prostu nadaj mu jakąś wysokość linii, a następnie Zastosuj vertical-align: bottom
.
div {
background:yellow;
margin:10px;
line-height:100px;
}
div > * {
vertical-align: bottom;
line-height: normal;
}
a {
background-color:#FFF;
height:20px;
display:inline-block;
border:solid black 1px;
padding:5px;
}
span {
background:red;
width: 50px;
}
<div>
<a>Some link</a>
<span>Some text </span>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-11 07:22:18