1 回答

TA貢獻1788條經驗 獲得超4個贊
您的意思是您想要一個 CSS 來設置類似于此效果的警報框樣式嗎?
.alert {
? min-width: 100%;
? background: lightgray;
? height: 50px;
? position: relative;
}
.media {
? height: 100%; /* fill up height */
}
.media-body {
? margin-left: calc(64px + 1em + 8px); /* image width + left of img + any margin */
??
? /* align vertical center */
? display: flex;
? align-items: center;
? height: 100%; /* fill up height */
}
.media-body h5 {
? margin: 0;
}
img, svg {
? ?position: absolute;
? ?top: -7px;
? ?left: 1em; /* you may use em if you wants the position have a relationship with container font-size */
}
<div class="alert alert-dark" role="alert">
? <div class="media">
<img th:if="${categoria.icone}" th:src="@{/imagem/download/__${categoria.icone.id}__}" width="64px" height="64px" class="mr-3" th:alt="${categoria}">
? ? <svg th:unless="${categoria.icone}" width="64px" height="64px" class="bd-placeholder-img mr-3" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
? ? ? <title>Placeholder</title>
? ? ? <rect width="100%" height="100%" fill="#868e96"></rect>
? ? ? <text x="50%" y="50%" fill="#dee2e6" dy=".3em">#</text>
? ? </svg>
? ? <div class="media-body">
? ? ? <h5 th:each="t : ${categoria.nome}" th:if="${#strings.equals(#strings.substringBefore(t.idioma,','), #strings.replace(#locale,'_','-'))}" th:utext="${t.conteudo}">something here</h5>
? ? </div>
? </div>
</div>
如果方向正確,您可能會考慮以下一些附加信息。
calc()
如果需要支持多種瀏覽器則兼容性。
背后的概念:
容器固定高度,小于圖像
圖像元素高度除以溢出部分作為邊距
絕對用于定位圖像:如果您不喜歡絕對,您也可以使用負邊距來實現相同的效果,該示例只是概念證明并演示了其中一種可能性
Flex 是一種現代且簡單的垂直對齊項目的方法
- 1 回答
- 0 關注
- 141 瀏覽
添加回答
舉報