图像和文字都在一行中

Question

嘿伙计我有一页here：

我希望标志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: agents@filmcomm.ca

我使用align =“left”来实现它并使用padding-bottom但没有效果。

任何想法如何将它们完美地放在一条线上？：

Answer 1

考虑类似的事情：

<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，它将完美地垂直对齐图像 - 无论其旁边的文字大小如何。令人惊讶的是它具有良好的cross-browser support（现代浏览器和IE9 +）。您只需要使用-moz等相应的前缀

JSFiddle（不包括webfonts）：https://jsfiddle.net/6q7tLucn/

Answer 2

您可以使用vertical-align作为图片

img.your_class {
   vertical-align:-2px;
}

Answer 3

嗯......我查看了HTML，看起来您的<img />位于<p>标记内。

您可以做的一件事是为<p>标记和<h3>标记提供一个“inline-insertwhateverhere”类，然后为该类提供以下规则：

.inline-elements {
    display: inline-block;
    margin: 0;
    padding: 0; /* just in case; remove if unneeded */
    vertical-align: middle;
}

然后你可以玩边距，填充，也许可以弄乱高度，使它看起来像你想要的。您最终可能会为<p>标记和<h3>标记分别添加类名称，例如“ca-flag”和“country-name”，然后替换 .inline-elements .ca-flag, .country-name，因此您可以更具体地自定义每个元素。

Answer 4

您只需将float:left添加到图片代码中即可。

<强> HTML

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

<强> CSS

.ClsImg{
  float:left;
}

FIDDLE

Answer 5

应用以下样式

  .wpb_wrapper p + p{
    clear: both;
  }
    .wpb_wrapper h3 + p {
    clear: both;
        float: left;
        margin: 0 5px 0 0;
    width: auto;
    }
    .wpb_wrapper h3 + p + h3, .wpb_wrapper h3 ~ p + h3 {
        clear: none;
        padding: 0;
        line-height: 24px;
    }