图像和文本全部在一行中

debugcn 发表于 Dev

用户名

嘿，我在这里有一个页面：

我希望将h3标志放在一条完美的直线上：

<h3>CONTACT MY AGENT</h3>

<img src="http://gringlishgirl.com/test/wp-content/uploads/2016/11/canada.png" align="left" />

<h3 style="font-size: 20px; padding-bottom: 5px;">CANADA</h3>

<strong>Film Comm Talent &amp; Model Agency</strong>
http://filmcomm.ca/
Hudson’s Bay Centre
Bloor Street East. Suite 3500
Toronto, ON M4W 1A8
phone: 416-915-3103
email: [email protected]

我使用align =“ left”使其实现并与padding-bottom一起使用，但没有效果。

任何想法如何将它们像这样完美地放在一行上吗？：

音乐动物

考虑类似：

<div class='canada-wrapper'>
  <img src='http://gringlishgirl.com/test/wp-content/uploads/2016/11/canada.png'>
  <h3>CANADA</h3>
</div>

还有你的CSS：

.canada-wrapper {
  // keep absolute positioning of the image within the wrapper
  position: relative;
}

.canada-wrapper img {
  // position 50% from the top, and offset by -50% using transforms
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.canada-wrapper h3 {
  // push the text to the right of the image
  // (fine tune as desired)
  margin-left: 48px;
}

这里的魔术是transform: translateY，它可以完美地垂直对齐图像-不管旁边的文本大小如何。令人惊讶的是，它具有良好的跨浏览器支持（现代浏览器和IE9 +）。您只需要在前面加上-moz，等等。

JSFiddle（不包含网络字体）：https ://jsfiddle.net/6q7tLucn/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。