如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]

Posted 2023-03-05

【中文标题】如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]

【英文标题】：How to left align and vertically align a image in a header and keep text in center of div horizontally [duplicate]

【发布时间】：2020-02-25 07:58:39

【问题描述】：

我正在寻求帮助，在此标题中左对齐和垂直对齐图像。

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
* 
  box-sizing: border-box;


img 
  float: left;
  vertical-align: middle;


.header 
  padding: 5px;
  text-align: center;
  background: #222222;
  color: white;
  font-size: 20px;


h2 
  color: white;


title 
  color: white;


body 
  font-family: 'Open Sans', sans-serif;
  background-color: #2C2C2C;

<div class="header" class="frame">
  <img src="https://i.imgur.com/pZIRNtP.png" class="logo"  />
  <h2>This should be center</h2>
</div>

这是我的图像代码（目前它是左对齐的，但我似乎无法垂直对齐它。然后当文本应该水平保持在 div 的中心时，它也会将我的文本向右移动）

img 
    float:left;
    vertical-align: middle;

我基本上需要红色图像保持相同大小，我只需要它左对齐（可能距左侧 50 像素）并与标题 div 垂直对齐。但我还需要文本保持在 div、vert 和 horz 的中心。

【问题讨论】：

请更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。让我们知道what you have tried so far 以及什么不起作用。

所以这意味着你想要红色图像上的文字？红色图像应该垂直居中对齐？文本应该垂直和水平居中对齐？

【参考方案1】：

一种方式：

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
* 
  box-sizing: border-box;


img 
  vertical-align: middle;


.header 
  padding: 5px;
  background: #222222;
  color: white;
  font-size: 20px;


h2 
  color: white;
  text-align: center;
  margin-top: -45px;


title 
  color: white;


body 
  font-family: 'Open Sans', sans-serif;
  background-color: #2C2C2C;

<div class="header" class="frame">
  <img src="https://i.imgur.com/pZIRNtP.png" class="logo"  />
  <h2>This should be center</h2>
</div>

【讨论】：

另请注意，您在 div 上重复了class。