Question

我在尝试将文字保持在左侧但在中心保持对齐方面遇到了一些问题。我必须将我想要的部分放在左边并输入一个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>

任何帮助将不胜感激！

谢谢！

Answer 1

您可以这样做，并调整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>

Answer 2

试试这个：

.lord123 {

    width: 300px;// you can change width
    margin: 0 auto;

}

完整代码：

.lord123 {

    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.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;

}

<div class="lordbpic">
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" height="200" width="300">
</div>

<div class="lord123">

<h1 class="lordbh">Lord Bravo</h1>

<p class="lordbp">
INFORMATION
</p>
</div>

Answer 3

您有多种解决方案可以做到这一点。

首先，从text-align: left和lordbh中删除lordbp。这将覆盖lord123。

中的规则

解决方案一：您可以将float: left和text-align: center添加到班级lord123。

请参阅下面的代码段：

.lord123 {
  text-align: center;
  float: left;
}

.lordbh {
  position: relative;
  font-size: 32px;
  font-family: Khalifah;
  color: #FFD700;
}

.lordbp {
  font-family: arial;
  color: #FFD700;
  padding-bottom: 10px;
}

.lordbpic {
  position: relative;
  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">

  <h1 class="lordbh">Lord Bravo</h1>

  <p class="lordbp">
    INFORMATION
  </p>
</div>

解决方案二：您可以为width定义固定lord123并添加text-align: center，这会自动将div放置。

请参阅下面的代码段：

.lord123 {
  text-align: center;
  width: 200px;
}

.lordbh {
  position: relative;
  font-size: 32px;
  font-family: Khalifah;
  color: #FFD700;
}

.lordbp {
  font-family: arial;
  color: #FFD700;
  padding-bottom: 10px;
}

.lordbpic {
  position: relative;
  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">

  <h1 class="lordbh">Lord Bravo</h1>

  <p class="lordbp">
    INFORMATION
  </p>
</div>

Answer 4

我不完全确定，但我认为你的意思是你希望所有内容都在与图像一样宽的列中，是吗？

最简单的方法是将所有元素设置为300px宽，但如果图像的固定宽度不是300px，则可以使用CSS表格。

#everything {
  display: table;
  margin: 0 auto;
}

.lord123 {
  display: table-row;
}

.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 {
  display: table-row;
  position: relative;
  text-align: center;
  display: block;
  padding-top: 10px;
}

<div id="everything">

  <div class="lordbpic">
    <img src="http://lorempixel.com/300/200" height="200" width="300">
  </div>

  <div class="lord123">
    <h1 class="lordbh">Lord Bravo</h1>
    <p class="lordbp">INFORMATION</p>
  </div>

</div>

尝试将文本移动到左侧，但它仍然在中心对齐

4 个答案: