时间戳

首页 > 解决方案 > 如何左对齐和垂直对齐标题中的图像并将文本水平保持在 div 的中心

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

问题描述

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

@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" alt="logo" />
  <h2>This should be center</h2>
</div>

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

img {
    float:left;
    vertical-align: middle;
}

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

标签： htmlcssimagecenter

解决方案

单程：

@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" alt="logo" />
  <h2>This should be center</h2>
</div>

推荐阅读