html - 尝试将文本向左移动，但仍居中对齐

尝试将文本保持在左侧但在居中对齐时遇到一些问题。我必须将想要的部分放到左侧，然后像某些答案所说明的那样输入div，但这是行不通的。这是我的代码，如果有人想帮助我:)

的CSS

.lord123 {
    text-align:center;
}

.lordbh {
    position: relative;
    font-size: 32px;
    font-family: Khalifah;
    color: #FFD700;
    text-align: left;

}

.lordbp {

    font-family: arial;
    color: #FFD700;
    padding-bottom: 10px;
    text-align: left;
}

.lordbpic {
    position: relative;
text-align:center;
display:block;
padding-top: 10px;

}

的HTML

<div class="lordbpic">
<img src="/Users/Mushriff/Desktop/Website/Images/example.jpg" height="200" width="300">
</div>

<div class="lord123">

<h1 class="lordbh">Lord Bravo</h1>

<p class="lordbp">
INFORMATION
</p>
</div>

任何帮助将不胜感激！

谢谢！

最佳答案

您可以这样做并调整left: 40%;使其适合您的需求。

.lord123 {
    text-align:center;
    position: relative;
}

.centered-text {
  position: absolute;
  left: 40%;
}

.lordbh {
    font-size: 32px;
    font-family: Khalifah;
    color: #FFD700;
    text-align: left;
}

.lordbp {
    font-family: arial;
    color: #FFD700;
    padding-bottom: 10px;
    text-align: left;
}

.lordbpic {
text-align:center;
display:block;
padding-top: 10px;

}

 <div class="lordbpic">
   <img src="/Users/Mushriff/Desktop/Website/Images/example.jpg" height="200" width="300">
 </div>

 <div class="lord123">
    <div class="centered-text">
      <h1 class="lordbh">Lord Bravo</h1>
      <p class="lordbp">INFORMATION</p>
  </div>
</div>