居中图像，下方有文字 [英] Centre images with text below

查看：24
本文介绍了居中图像，下方有文字的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为一个学校项目开发一个网站，我正在尝试让图像显示在页面上，下面是文本.我已经研究它很久了，但我似乎什么也做不了，我也尝试过设置边距.我已经没有想法了.现在显示图像，但都被推到左侧而不是中间均匀分布.谢谢

.middle {位置:相对；溢出:隐藏；}.rowone {向左飘浮;宽度:200px；边距:1% 1% 45px 1%；}.文本 {位置:绝对；底部:0px；边距:30px；背景颜色:灰色；}.rowone img {宽度:100%；显示:块；}

<div class="rowone"><img src="images/logofootball.png" height="200" width="200"><div class="text">Text</div>

<div class="rowone"><img src="images/logofootball.png" height="200" width="200"><div class="text">Text</div>

<div class="rowone"><img src="images/logofootball.png" height="200" width="200"><div class="text">Text</div>

<div class="rowone"><img src="images/logofootball.png" height="200" width="200"><div class="text">Text</div>

</section>

感谢您的帮助.抱歉，如果代码未正确显示，我不太确定您打算如何操作.

解决方案

去掉 position:absolute 并将 width 设置为 fit-content> 和 margin 到 auto.

.middle {位置:相对；溢出:隐藏；}.rowone {向左飘浮;宽度:200px；边距:1% 1% 45px 1%；}.文本 {底部:0px；宽度:适合内容；保证金:自动；背景颜色:灰色；}.rowone img {宽度:100%；显示:块；}

<div class="rowone"><img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200"><div class="text">Text</div>

<div class="rowone"><img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200"><div class="text">Text</div>

<div class="rowone"><img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200"><div class="text">Text</div>

<div class="rowone"><img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200"><div class="text">Text</div>

</section>

I'm developing a website for a school project and I'm trying to get images to display across a page with text underneath. I've been looking at it for ages but I can't seem to get anything to work, I've also tried setting margins. And I'm all out of ideas. Right now the images are displayed but there all pushed to the left side instead of in the middle evenly spread out. Thanks

.middle {
  position: relative;
  overflow: hidden;
}

.rowone {
  float: left;
  width: 200px;
  margin: 1% 1% 45px 1%;
}

.text {
  position: absolute;
  bottom: 0px;
  margin: 30px;
  background-color: gray;
}

.rowone img {
  width: 100%;
  display: block;
}

<section class="middle">

  <div class="rowone">
    <img src="images/logofootball.png" height="200" width="200">
    <div class="text">Text</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" height="200" width="200">
    <div class="text">Text</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" height="200" width="200">
    <div class="text">Text</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" height="200" width="200">
    <div class="text">Text</div>
  </div>
</section>

Thanks for any help. Sorry if the code isn't displayed properly I'm not too sure how you're meant to do it.

解决方案

Get rid of position:absolute and set width to fit-content and margin to auto.

.middle {
    position: relative;
    overflow: hidden;
}

.rowone {
    float: left;
    width: 200px;
    margin: 1% 1% 45px 1%;
}

.text {
    bottom: 0px;
    width:fit-content;
    margin: auto;
    background-color: gray;
}

.rowone img {
    width: 100%;
    display: block;
}

<section class="middle">

        <div class="rowone">
            <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200">
            <div class="text">Text</div>
        </div>
    </section>

这篇关于居中图像，下方有文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆