如何平滑地显示图像上的其他元素？

Question

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

源代码：fiddle

我想实现这样的目标：

我面临的问题是：

  

文字互相参与

     

文本溢出容器

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/