如何对齐/居中文本(在一列)下的图像?Css html只,使用flexbox或其他东西

yzxexxkh  于 2022-12-16  发布在  其他
关注(0)|答案(3)|浏览(119)

新的编码和我试图创建一个移动的第一网站的参考。我试图在我的页脚三个图像下居中文本。有人能帮我做到这一点吗?有一个和每一个图像类。我还需要在整个网站上的其他图像这个中心文本。
感谢你的帮助。
下面是我的页脚的html:

<section id="main-footer"> 
    <hr>
        <img src="images/forest.png" class="forest" alt="forest" width="150" height="125">
        <h1> From the Forest </h1>
        <p> Using sustainably sourced wood and bamboo from well-managed forests. </p>
        <img src="images/returning-roots.png"  class="roots" alt="returning roots" width="150" height="125">
        <h1> Returning Roots </h1>
        <p> Not Just Planting Trees, Rebuilding Forests. 500,000 Trees & Counting. </p>
        <img src="images/maximize.png" class="m2m" alt="ying&yang" width="150" height="125">
        <h1> Maximize to Minimize </h1> 
        <p> Processing methods that stretch resources and minimize our impact on the planet. </p> 

</section>

下面是我的CSS:

.forest > h1, p {
    display: flex;
    flex-direction: auto;
    align-items: center;

    
    }

我试着用#main-footer替换.forest,结果是:

.forest > h1, p { }

但效果不太好。

3npbholx

3npbholx1#

尝试以下样式。你应该设置子图像完全发生在父div中。

<div class="parent">        
    <img src="images/forest.png" class="forest" alt="forest" width="150" height="125">
    <h1> From the Forest </h1>
</div>

.parent{
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }
       
    h1 {
        display: absolute;
        top: 50%;
        left: 50%;
        transform: translate(50%, -50%);
    }
}
1mrurvl1

1mrurvl12#

您只需要按照以下代码在#main-footer上设置text-align:center;

#main-footer{
   text-align:center;
}
<section id="main-footer"> 
    <hr>
        <img src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="forest" alt="forest" width="150" height="125">
        <h1> From the Forest </h1>
        <p> Using sustainably sourced wood and bamboo from well-managed forests. </p>
        <img src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"  class="roots" alt="returning roots" width="150" height="125">
        <h1> Returning Roots </h1>
        <p> Not Just Planting Trees, Rebuilding Forests. 500,000 Trees & Counting. </p>
        <img src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="m2m" alt="ying&yang" width="150" height="125">
        <h1> Maximize to Minimize </h1> 
        <p> Processing methods that stretch resources and minimize our impact on the planet. </p> 

</section>
lf5gs5x2

lf5gs5x23#

你也可以像这样使用center标签。

<div>        
<img src="images/forest.png" class="forest" alt="forest" width="150" height="125">
<center><h1>From the Forest </h1></center> </div>

相关问题