## 如何將 Bootstrap 輪播標題垂直向左放置？

如何將 Bootstrap 輪播標題垂直向左放置

Bootstraps 的輪播標題設計為自動在輪播中水平居中滑動。但是，可能需要進行一些調整才能實現所需的垂直對齊。

垂直居中標題

要使標題垂直居中，請結合使用transform屬性和translateY功能。將以下樣式加入 .carousel-caption CSS：

<code class="css">top: 50%;
transform: translateY(-50%);</code>

這會將標題錨定到其容器的頂部，然後將其垂直偏移 50% 以達到中心位置。

消除多餘的底部空間

Bootstrap 的預設樣式在標題下方添加了一些額外的空間。若要刪除此內容，請將以下內容新增至.carousel-caption CSS 中：

<code class="css">bottom: initial;</code>

防止元素模糊

對於不支援轉換樣式的瀏覽器，建議將以下樣式新增至父元素.item：

<code class="css">-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;</code>

這可以防止在Safari 和Mobile Safari 中使用分數像素定位時出現模糊元素。

範例

<code class="css">.carousel-caption {
  color: black;
  right: 58%;
  text-align: center;
  max-width: 500px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}</code>

透過應用這些修改，輪播標題將垂直居中，並在不同的螢幕尺寸上保持視覺穩定。

以上是## 如何將 Bootstrap 輪播標題垂直向左放置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！