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

yzxexxkh 于 2022-12-16 发布在其他

关注(0)|答案(3)|浏览(118)

新的编码和我试图创建一个移动的第一网站的参考。我试图在我的页脚三个图像下居中文本。有人能帮我做到这一点吗？有一个和每一个图像类。我还需要在整个网站上的其他图像这个中心文本。
感谢你的帮助。
下面是我的页脚的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 { }

但效果不太好。

Html

来源：https://stackoverflow.com/questions/74807728/how-to-align-center-text-in-a-column-under-an-image-css-html-only-using-flex

3条答案

按热度按时间

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%);
    }
}

赞(0）回复(0）举报 2022-12-16

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>

赞(0）回复(0）举报 2022-12-16

lf5gs5x23#

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

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

赞(0）回复(0）举报 2022-12-16

我来回答

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

3条答案

相关问题

热门标签

最新问答