在页面html css代码左侧的页眉上重新放置文本

Question

[我想知道是否有人可以和我分享html和css代码，以将标题词“ Michelle Lindemann's .... Bring your ...”移到标题的中间左侧而不是中间。我在下面复制了当前代码，并附上了该页面的屏幕截图，因为我认为它可以为您提供帮助。非常感谢，我很感激。米歇尔

.carousel-inner img {
    width: 100%;
}


.carousel-caption {
    position: absolute;
    transform: translateY(-50%);
    top: 47%;
}


.carousel-caption h1 {
    font-size: 4.5rem;
    text-transform: uppercase;
    text-shadow: .1rem .1rem .1rem black;

}

.carousel-caption h3 {
    font-size: 2rem;
    text-transform: uppercase;
    text-shadow: .1rem .1rem .6rem black;
    padding-bottom: 1rem;
}

.btn {
    font-weight: 500;
    border-width: medium;

  <div class="carousel-inner">
                 <div class="carousel-item active">
                     <img src="img/meheaderwordstwo.png">
                     <div class="carousel-caption">
                         <h1 class="display-2"></h1>Michelle Lindemann's Magical Stories</h1>
                         <h3>Bringing your dreams to life!</h3>
                         <a href="#" class="btn btn-outline-light btn-sm">DISCOVER MORE</a>

enter image description here

Answer 1

将text-left类别carousel-caption上的<div>类别设置为文本左对齐。

<div class="carousel-caption text-left">

更新：我已根据您的更改请求修改了代码。请参阅代码段以获取更改详细信息。

1. h1和h3文字为黑色
2. 按钮颜色变为黑色

.carousel-inner img {
  width: 100%;
}

.carousel-caption {
  position: absolute;
  transform: translateY(-50%);
  top: 47%;
}

.carousel-caption h1 {
  font-size: 4.5rem;
  text-transform: uppercase;
  text-shadow: .1rem .1rem .1rem black;
  color: black; /* h1 color black */
}

.carousel-caption h3 {
  font-size: 2rem;
  text-transform: uppercase;
  text-shadow: .1rem .1rem .6rem black;
  padding-bottom: 1rem;
  color: black;  /* h3 color black */
}

.btn {
  font-weight: 500;
  border-width: medium;
}

/* Modify the btn-outline-dark color to black */
.btn-outline-dark {
  color: black !important;
  border-color: black !important;
}

.btn-outline-dark:hover {
  color: white !important;
  background-color: black !important;
  border-color: black !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="https://picsum.photos/id/1009/1920/1080">
    <div class="carousel-caption text-left">
      <h1 class="display-2">Michelle Lindemann's Magical Stories</h1>
      <h3>Bringing your dreams to life!</h3>
      <a href="#" class="btn btn-sm btn-outline-dark ">DISCOVER MORE</a>
    </div>
  </div>
</div>