Html 我想在屏幕中央对齐一个徽标，并在图像后面显示几行。但是文本与图像一致_Html_Css

Html 我想在屏幕中央对齐一个徽标，并在图像后面显示几行。但是文本与图像一致

html css

Html 我想在屏幕中央对齐一个徽标，并在图像后面显示几行。但是文本与图像一致,html,css,Html,Css,这是我的HTML代码： <img class="centeredimage" src="BLACK.jpg"> This is regarding.... <span cl

这是我的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>

图像在屏幕中央对齐，但文本不是在图像与图像同时显示后显示的。如何使其位于图像之后，以便两者都在屏幕中央对齐？

试试这个

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

我用这个代码把屏幕中间的东西放在中间，例如一个加载器。它可以有多个部分，这无关紧要。你只需将所有部分放在一个分区中。我以前使用“边距”技巧，现在仍然在这里和那里使用，但现在我使用表格/表格单元格来完成工作。它可以在任何地方使用，比如手机等（注意，我不处理10年前的浏览器）。下面是一些直接来自教学示例的代码：

<style>
        .app_style {
            width: 100%;
            height: 100%;
            display: table;
        }
        .loader_style {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .loader_icon_style {
            border: 2px solid lightgray;
            border-radius: 5px 5px 5px 5px;
        }
        .loader_bar_padding {
            padding-top: 10px;
        }
        .loader_blurb {
            width: inherit;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: yellow;
            font-style: italic;
        }
    </style>

</head>

<body>
    <sample-app class="app_style">
        <div class="loader_style">
            <img class="loader_icon_style" src="assets/images/r2-d2.jpg" />
            <div class="loader_blurb loader_bar_padding">
                May the force be with you...
            </div>
            <img class="loader_bar_padding" src="assets/images/loader-bar.gif" />
        </div>
    </sample-app>
</body>


.app_风格{
宽度：100%；
身高：100%；
显示：表格；
}
.u样式{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
.loader_图标_样式{
边框：2倍纯色浅灰色；
边界半径：5px 5px 5px；
}
.loader_bar_padding{
填充顶部：10px；
}
.loader_blurb{
宽度：继承；
文本对齐：居中；
字体大小：14px；
字体大小：粗体；
颜色：黄色；
字体：斜体；
}
愿原力与你同在。。。

如果您希望图像和文本居中，而不是仅对齐图像，否则文本将遵循DOM上的其他逻辑，主要是如果您使用图像的绝对位置而不是文本的绝对位置

可以使用与中心对齐的包装器div，并将所有内容放入其中

正文{
背景色：#ff00ff；
}
.包装纸{
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-150px；
左边距：-100px；
宽度：200px；
高度：300px；
}
.你的形象{
宽度：200px；
高度：200px；
}
.新的{
颜色：#FFFFFF；
}
.正文{
字体大小：20px；
字母间距：8px；
}
.a2017{
字体大小：15px；
字母间距：2px；
}
.马上就来{
字母间距：1px；
}





这是关于
欢迎来到2017


即将到来

我更喜欢使用Flexbox。它简化了您需要执行的许多编码

在您的情况下，只需将HTMl代码包装在一个div中，并将其作为您的CSS：

div{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

你说的“之后”是什么意思。你的意思是“在下面”还是“在右边”？我是说在下一行之后。谢谢你的作品！但是当文本很长时，它会扩展到多行。它应该在一行中。如何解决这个问题？若我使用左边距文本的某些部分隐藏在移动视图中。

div{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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