html - 如何流畅地显示图像上的其他元素？

Question

我一直在努力将一些元素平滑地放置在图像上并使它们响应，但其他标签(如 p、h1 等)破坏了对齐。我想知道我能做什么？

源代码:fiddle

我想实现这样的目标:

我面临的问题是:

Text are involving into each other

Texts are overflowing out of the container

PHP:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="slider-space">
        <span class="others">
                <?php the_post_thumbnail(); ?>
            <h1><?php the_title(); ?></h1>
            <?php the_excerpt(); ?>
            <a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'website', true ) ); ?>">Read More</a>
        </span>
        </header>
    </article>

此代码呈现以下输出:

        <article id="post-227" class="post-227 cafes type-cafes status-publish has-post-thumbnail hentry">
        <header class="slider-space">
        <span class="others">
                <img width="618" height="246" src="https://www.flynsarmy.com/wp-content/uploads/2012/09/nivoslider/images/up.jpg" />
            <h1>Im just a h1 tag line</h1>
            
            <p>Lorem Ipsum dolor sit amet</p>
            
            <a href="www.google.com">Read More</a>
        </span>
        </header>
    </article>

CSS:

.slider-space {position:relative;width: 100%; height: auto; text-align: center; background: rgba(0,0,0,0.4);}
.slider-space img{ width: 100%; height: auto;}
.slider-space span, .slider-space a, .slider-space h1{color: #FFF;}

Answer 1

您应该为这些元素添加一个包装器 DIV 并为其提供以下设置，这会将其放置在其(相对位置)容器之上(.slider-space)并将其居中:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

在你的 jsfiddle 中，包装器是 .overlay DIV:

https://jsfiddle.net/0Lvvf95c/