圖像和文本都在一行

我想要的標誌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」使其發生並使用填充底部但不起作用。

不知道如何把它們放在這樣一行完美??：

來源

2016-11-15 Gaara Itachi Uchiha

考慮是這樣的：

<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（不包括網絡字體）：https://jsfiddle.net/6q7tLucn/

來源

2016-11-15 04:09:16 MusikAnimal

可以使用vertical-align的圖像

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

來源

2016-11-15 03:36:54 hoangkianh

嗯......我看了看HTML，看起來您的<img />位於<p>標記內。

一兩件事你可以做的是給<p>標籤和<h3>標籤類「內聯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」，然後用.ca-flag, .country-name替換爲 .inline-elements，以便您可以更具體地自定義每個元素。

來源

2016-11-15 03:37:54

您可以將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

來源

2016-11-15 03:54:36 shishir

應用下面的風格

.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; 
    }

來源

2016-11-15 05:29:29

圖像和文本都在一行

回答

相關問題