大家好,我有一个页面 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 & 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 但没有效果。
知道如何将它们完美地放在一行中吗??:
最佳答案
考虑这样的事情:
<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/
关于css - 图像和文本全部在一行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40601517/