css 为什么图像右边的文字在那里而不是在下面呢？

px9o7tmv 于 2023-02-26 发布在其他

关注(0)|答案(2)|浏览(169)

.samsung {
  float: left;
  width: 25%;
  padding: 5px;
}

.iphone {
  float: left;
  width: 25%;
  padding: 5px;
}

.xiaomi {
  float: left;
  width: 25%;
  padding: 5px;
}

<section class="phones">
  <h3>Best phones you can chose in 2023</h3>
  <div class="samsung">
    <img src="https://american-pc.com/wp-content/uploads/2023/02/61imYpK33qL._SL1500_.jpg" alt="no internet connetion" width="75%">
    <figcaption>s23 ultra</figcaption>
  </div>
  <div class="Iphone">
    <img src="https://assets.shpresa.al/shop/2022/09/daac540d-cel1351-p.jpg" alt="no internet connetion" width="75%">
    <figcaption>Iphone 14 pro max</figcaption>
  </div>
  <div class="xiaomi">
    <img src="https://www.giztop.com/media/catalog/product/cache/dc206057cdd42d7e34b9d36e347785ca/p/m/pms_1670747135.2084309.png" alt="no internet connetion" width="75%">
    <figcaption>xiaomi 13 pro</figcaption>
  </div>
  <br><br>
</section>
<section class="info">
  <label for="phoneA">Samsung</label>
  <input type="checkbox" id="phoneA" name="footer" value="phone">
  <label for="phoneB">Iphone</label>
  <input type="checkbox" id="phoneB" name="footer" value="phone">
  <label for="phoneC">xiaomi</label>
  <input type="checkbox" id="phoneC" name="footer" value="phone">
  <br>
</section>

the images that i have problem我是一个bigenner在前端网页开发，我正在测试我学到的一些新东西，我想添加3个图像和一些选项在底部，但由于某些原因，它一直停留在左边。我复制了一些css在线使图像，因为他们在那里（我仍然不faimiliar与css尚未）有人能帮助我吗？
我试过将section和div中的所有内容排序，添加br，但似乎都不起作用!

css

来源：https://stackoverflow.com/questions/75568593/why-is-it-that-the-text-on-the-right-of-the-images-is-there-instead-of-down

2条答案

按热度按时间

bttbmeg01#

你错误地称你的班级为"Iphone"和"iphone"

我把它固定在下面。

我觉得你需要`text-align:center;`

我在下面添加了它。我还添加了一个border: 1px solid red;。如果你删除了text-align：center，那么这个边框代码会让你更容易看到哪里出错了。

.phones {
display:flex;
flex-direction:row;
}

.samsung {
  
  width: 25%;
  padding: 5px;
  border: 1px solid red;
  text-align:center;
}

.iphone {

  width: 25%;
  padding: 5px;
  border: 1px solid red;
  text-align:center;
}

.xiaomi {

  width: 25%;
  padding: 5px;
  border: 1px solid red;
  text-align:center;
}

<section>
  <h3>Best phones you can chose in 2023</h3>
  <div class="phones">
  <div class="samsung">
    <img src="https://american-pc.com/wp-content/uploads/2023/02/61imYpK33qL._SL1500_.jpg" alt="no internet connetion" width="75%">
    <figcaption>s23 ultra</figcaption>
  </div>
  <div class="iphone">
    <img src="https://assets.shpresa.al/shop/2022/09/daac540d-cel1351-p.jpg" alt="no internet connetion" width="75%">
    <figcaption>Iphone 14 pro max</figcaption>
  </div>
  <div class="xiaomi">
    <img src="https://www.giztop.com/media/catalog/product/cache/dc206057cdd42d7e34b9d36e347785ca/p/m/pms_1670747135.2084309.png" alt="no internet connetion" width="75%">
    <figcaption>xiaomi 13 pro</figcaption>
  </div>
  </div>
  <br><br>
</section>
<section class="info">
  <label for="phoneA">Samsung</label>
  <input type="checkbox" id="phoneA" name="footer" value="phone">
  <label for="phoneB">Iphone</label>
  <input type="checkbox" id="phoneB" name="footer" value="phone">
  <label for="phoneC">xiaomi</label>
  <input type="checkbox" id="phoneC" name="footer" value="phone">
  <br>
</section>

这给了你这个，我想这是你想要的？（红色边框只是为了让你看到文本居中，即使图像没有居中）。

好了，现在我终于明白了 * 哪 * 段文字放错了位置!

你应该做的是避免"float：left;相反，将三个电话图像和标题DIV放入一个"flexbox"中，并使用我为类phone添加的CSS。
这是你想要的吗？

赞(0）回复(0）举报 2023-02-26

qni6mghb2#

试试这个css让所有文本居中：

* {text-align: center;}

尝试使用这个css将正文中的所有文本居中

body {text-align: center;}

类似地，尝试使用css在特定类中居中文本

.class_name {text-align: center;}

顺便说一句，分享你的代码，让人们更好地理解这个问题。

赞(0）回复(0）举报 2023-02-26

我来回答

css 为什么图像右边的文字在那里而不是在下面呢？

2条答案

你错误地称你的班级为"Iphone"和"iphone"

我觉得你需要`text-align:center;`

好了，现在我终于明白了 * 哪 * 段文字放错了位置!

相关问题

热门标签

最新问答

css 为什么图像右边的文字在那里而不是在下面呢？

2条答案

你错误地称你的班级为"Iphone"和"iphone"

我觉得你需要text-align:center;

好了，现在我终于明白了 * 哪 * 段文字放错了位置!

相关问题

热门标签

最新问答

我觉得你需要`text-align:center;`