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

定位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中文網其他相關文章！