Html 如何在将文本对齐到图像右侧的同时将图像居中？

我试图在页面中央对齐一个图像，同时在图像右侧对齐一些文本。我如何在css或html中实现这一点

以下是我目前的尝试：

.center img{
显示：内联块；
保证金：0自动；
}
.center txt{
显示：内联块；
}

家

我们有一个包装器-

div

Div

大小为视口宽度和高度的100%。我为

div

pics提供背景，并为变暗提供线性渐变

Div

是一个弹性块。内部内容与

对齐内容

（水平）和

对齐项目

（垂直）居中对齐。就这些

ps：对不起，对不起。不是全部。我们和这位女士一起去喝啤酒。：）

*{
填充：0；
保证金：0；
}
div{
背景图像：线性渐变（rgba（0,0,0,8）0%，rgba（0,0,0,8）100%），url（“http://beerhold.it/600/400");
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
宽度：100vw；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：#fff；
}
img{
右边距：1米；
}

同侧眼睑

像这样：

HTML:

---

要使图像居中，请使用

 img.center{
display:block;
margin:0 auto;
}

---

将图像和文本包装在一个容器中，并向其中添加

display:flex

然后，要使它们居中，请使用

align items:center和
调整内容：中心

请参阅下面的代码片段。让我知道它是否适合你

有关如何垂直居中的更多信息，请参见此处->


.center img{
显示：内联块；
保证金：0自动；
}
.center txt{
显示：内联块；
}
.容器{
宽度：500px；
高度：500px；
边框：2倍纯红；
显示器：flex；
对齐项目：居中；
对齐内容：中心；填充：0 15px；}

家
解决方案1:

您可以使用
将图像和文本包装在一起，并使用
文本对齐：居中以及
垂直对齐：中间


.center img，
.center txt{
显示：内联块；
垂直对齐：中间对齐；
}
#包装纸{
文本对齐：居中；
边框：1px纯红；
}

家
只需添加
垂直对齐：中间到类
中心img

“垂直对齐”特性设置图元的垂直对齐方式。
中间位置位于父元素
的中间

.center img{
显示：内联块；
保证金：0自动；
垂直对齐：中间对齐；
}
.center txt{
显示：内联块；
}

家
使用此选项-

<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Right Vertical aligned text</span>
</div>


右垂直对齐文本

您的系统要求是什么？IE 9+或者你需要8、7或（上帝禁止）6支持吗？希望你至少尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码，并解释您尝试了什么以及为什么它不起作用。很抱歉，缺少信息。我编辑了上面的帖子。我找不到原始的占位符图像只有代码的答案没有用处。解释你做了什么，以及为什么/如何工作。@cale_b fair，将来会做：）只使用代码的答案没有用处。解释你做了什么，以及为什么/如何工作。这是一个正确的答案，如果你编辑它来解释你在做什么以及它为什么起作用，我会投赞成票。他没有问这个问题。他说“将一些文本对齐到图像的右侧”。我认为文本垂直居中显示只是为了显示一个示例，而不是一个严格的要求。嗨，请参考下面的fiddle，这是可以在所有浏览器上工作的简单CSS。也许需要一点解释？谢谢你的回答！不过，我确实进行了快速跟进。如何更改代码以在文本中添加一些左填充，同时仍将图片保留在同一位置？可以使用
.center txt{margin left:20px}
。如果要在图像和文本之间留出一些空间，请使用
边距
，而不是
填充
。使用
padding
仍会使它们紧靠在一起，并将子对象（在您的情况下是
h1
）推到您设置的方向。使用这两种方法都将在视觉上产生相同的结果，但请尝试启用所有内容的边界以查看差异。
.outside {
  width: 800px;
  height: 600px;
  border: 1px solid red;
  position: relative;
}

.inside {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  margin: 0 auto;
  top: calc(50% - 100px); /* THE VALUE (100PX) SHOULD BE HALF OF YOUR ELEMENT'S HEIGHT */
}

.img {
  float: left;
}

 img.center{
display:block;
margin:0 auto;
}

<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Right Vertical aligned text</span>
</div>