首頁  >  文章  >  web前端  >  如何垂直居中和左對齊 Bootstrap 輪播標題?

如何垂直居中和左對齊 Bootstrap 輪播標題?

DDD
DDD原創
2024-10-30 09:33:27423瀏覽

How to Vertically Center and Left-Align a Bootstrap Carousel Caption?

定位Bootstrap 輪播標題:垂直居中且左對齊

為了使Bootstrap 輪播標題垂直居中並將其稍微向左放置,可以使用以下組合可以實作CSS 屬性。

CSS 解

在CSS 中,應加入下列樣式:

<code class="css">.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}

.item {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}</code>

說明

  • top: 50%;標題垂直放置在中心。
  • transform:translateY(-50%);: 將標題向上移動其高度的一半,從而實現垂直居中。
  • bottom: 初始;: 刪除套用於輪播標題的預設底部填入。
  • transform-style:preserve-3d;: 防止放置在半像素上的元素模糊。

與透過這些 CSS 調整,輪播標題將保持垂直居中並稍微向左對齊,從而確保無論螢幕尺寸如何,位置一致。

以上是如何垂直居中和左對齊 Bootstrap 輪播標題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn