html - 我想在屏幕中央对齐一个 Logo 并在图像之后显示几行。但是文本与图像重合

Question

这是我的 HTML 代码:

<img class="centeredimage"  src="BLACK.jpg"><br><br>
        <p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
        <span class = "a2017">Welcome to 2017</span><br><br>
        <span class="coming_soon">Coming Soon</span></p><br><br>

这是我的 CSS 代码:

.centeredimage {
     position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
        }
.new{
        color:#FFFFFF;
        }

.main_text{
        font-size:20px;
        letter-spacing: 8px;
        }
.a2017{
          font-size:15px ;
          letter-spacing:2px ;
        }
.coming_soon{
        letter-spacing: 1px;
        }

图像在屏幕中心对齐，但在显示图像与图像重合后显示文本而不是显示文本。如何使它出现在图像之后，以便两者都在屏幕中间的中心对齐？

Answer 1

试试这个

.centeredimage {
 display : block;
 width: 200px;
margin: auto;
 ...