如何在不影响设计的情况下将此图像正确放置在标题旁边
How to position this image next to the heading properly without affecting the design
所以我一直在努力想办法解决这个问题，我是从 PSD 编码的，但是我在定位图像（灯泡）时遇到了问题。
我试过绝对定位，然后调整 'right' 将其定位在标题旁边，但由于某种原因，这在上面的部分和部分之间添加了一些白色 space它的。另外，我想在图像上方添加一些填充以使其更整洁，但这只会将图像向下推，而不是在其上方添加填充。
我这样做的另一个问题是，当我更改屏幕尺寸时，图像会完全错位。
我的CSS:
.lightbulb {
position: absolute;
right: 63%;
margin-top: 20px;
}
我的HTML:
<section class="what">
<h2>What is a <span class="red-underline">style tune-up?</span></h2>
<p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
<p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
<img class="lightbulb" src="/img/lightbulb.png" /><h2>Here's <span class="red-underline">how it works:</span></h2>
<p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
<p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>
如有任何帮助，我们将不胜感激。
您可以像这样在 h 标签上使用 :before pseudo-element：https://jsfiddle.net/qh9u9vba/1/
.how h2:before {
content:"";
position:absolute;
height:50px;
width:50px;
margin-left:-60px;
margin-top:-10px;
background-image:url('http://placehold.it/50x50');
}
并从 HTML 中删除 img。这将使您的 h 标签保持在中间，并将图像放在文本所在的位置。修复边距以适合您的图像大小。祝你好运。
注意：我添加 text-align:center; 只是为了演示目的，否则图像会超出视口。
有了这个HTML:
<img class="lightbulb" src="http://lorempicsum.com/rio/50/50/3" />
<h2 class="lightbulb-title">Here's <span class="red-underline">how it works:</span></h2>
你可以使用这个CSS:
.lightbulb, .lightbulb-title {
display: inline-block;
line-height: 50px;
vertical-align: middle;
}
演示：
.lightbulb, .lightbulb-title {
display: inline-block;
line-height: 50px;
vertical-align: middle;
}
<section class="what">
<h2>What is a <span class="red-underline">style tune-up?</span></h2>
<p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
<p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
<img class="lightbulb" src="http://lorempicsum.com/rio/50/50/3" />
<h2 class="lightbulb-title">Here's <span class="red-underline">how it works:</span></h2>
<p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
<p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>
</section>
您是否需要垂直对齐标题，使其恰好位于灯泡的中间？抱歉，如果我没有正确看到，但如果那是你想要做的，我已经 re-worked 你的代码，以便在使用以下方法时更容易使用。这是一种在包装 parent 元素上使用 display: table 并在其 children:
上使用 display: table-cell 的方法
HTML:
<div class="row">
<div class="image">
<img src="http://www.clipartbest.com/cliparts/4Tb/Mdb/4TbMdbeLc.png">
</div>
<div class="heading">
<h2>
Here's how it works
</h2>
</div>
</div>
CSS:
.row {
display: table;
}
.row > .image, .row > .heading {
display: table-cell;
vertical-align: middle;
}
这是一个有效的 fiddle：https://jsfiddle.net/8mwL1h51/
编辑：如果您需要标题略低于中间，则除上述内容外，还添加以下内容：
.image img {
display: block;
padding-bottom: 20px;
}
已更新 fiddle：https://jsfiddle.net/8mwL1h51/5/
使用下面的代码
HTML
<section class="what">
<h2>What is a <span class="red-underline">style tune-up?</span></h2>
<p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
<p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
<img class="lightbulb" src="http://www.greeklifethreads.com/v/vspfiles/assets/images/blog.png" /><h2>Here's <span class="red-underline">how it works:</span></h2>
<p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
<p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>
</section>
CSS
.lightbulb {
}
.how { float:left; }
.how img { float:left; margin-right:10px; }
希望这对您有所帮助:)
如果您希望图像和文本居中对齐，请使用以下代码
HTML
<section class="what">
<h2>What is a <span class="red-underline">style tune-up?</span></h2>
<p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
<p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
<div class="test">
<img class="lightbulb" src="http://www.greeklifethreads.com/v/vspfiles/assets/images/blog.png" /><h2>Here's <span class="red-underline">how it works:</span></h2>
</div>
<p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
<p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>
</section>
CSS
.lightbulb {}
.how { margin:0 auto; width: 100%; text-align:center; }
.test { margin:0 auto; width: 50%; vertical-align:middle;}
.how img { float:left; }
.how p { clear:both;}
.how h2 { padding-top : 10px;}
所以我一直在努力想办法解决这个问题，我是从 PSD 编码的，但是我在定位图像（灯泡）时遇到了问题。
我试过绝对定位，然后调整 'right' 将其定位在标题旁边，但由于某种原因，这在上面的部分和部分之间添加了一些白色 space它的。另外，我想在图像上方添加一些填充以使其更整洁，但这只会将图像向下推，而不是在其上方添加填充。
我这样做的另一个问题是，当我更改屏幕尺寸时，图像会完全错位。
我的CSS:
.lightbulb {
position: absolute;
right: 63%;
margin-top: 20px;
}
我的HTML:
<section class="what">
<h2>What is a <span class="red-underline">style tune-up?</span></h2>
<p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
<p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
<img class="lightbulb" src="/img/lightbulb.png" /><h2>Here's <span class="red-underline">how it works:</span></h2>
<p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
<p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>
如有任何帮助，我们将不胜感激。
您可以像这样在 h 标签上使用 :before pseudo-element：https://jsfiddle.net/qh9u9vba/1/
.how h2:before {
content:"";
position:absolute;
height:50px;
width:50px;
margin-left:-60px;
margin-top:-10px;
background-image:url('http://placehold.it/50x50');
}
并从 HTML 中删除 img。这将使您的 h 标签保持在中间，并将图像放在文本所在的位置。修复边距以适合您的图像大小。祝你好运。
注意：我添加 text-align:center; 只是为了演示目的，否则图像会超出视口。
有了这个HTML:
<img class="lightbulb" src="http://lorempicsum.com/rio/50/50/3" />
<h2 class="lightbulb-title">Here's <span class="red-underline">how it works:</span></h2>
你可以使用这个CSS:
.lightbulb, .lightbulb-title {
display: inline-block;
line-height: 50px;
vertical-align: middle;
}
演示：
.lightbulb, .lightbulb-title {
display: inline-block;
line-height: 50px;
vertical-align: middle;
}
<section class="what">
<h2>What is a <span class="red-underline">style tune-up?</span></h2>
<p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
<p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
<img class="lightbulb" src="http://lorempicsum.com/rio/50/50/3" />
<h2 class="lightbulb-title">Here's <span class="red-underline">how it works:</span></h2>
<p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
<p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>
</section>
您是否需要垂直对齐标题，使其恰好位于灯泡的中间？抱歉，如果我没有正确看到，但如果那是你想要做的，我已经 re-worked 你的代码，以便在使用以下方法时更容易使用。这是一种在包装 parent 元素上使用 display: table 并在其 children:
display: table-cell 的方法
HTML:
<div class="row">
<div class="image">
<img src="http://www.clipartbest.com/cliparts/4Tb/Mdb/4TbMdbeLc.png">
</div>
<div class="heading">
<h2>
Here's how it works
</h2>
</div>
</div>
CSS:
.row {
display: table;
}
.row > .image, .row > .heading {
display: table-cell;
vertical-align: middle;
}
这是一个有效的 fiddle：https://jsfiddle.net/8mwL1h51/
编辑：如果您需要标题略低于中间，则除上述内容外，还添加以下内容：
.image img {
display: block;
padding-bottom: 20px;
}
已更新 fiddle：https://jsfiddle.net/8mwL1h51/5/
使用下面的代码
HTML
<section class="what">
<h2>What is a <span class="red-underline">style tune-up?</span></h2>
<p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
<p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
<img class="lightbulb" src="http://www.greeklifethreads.com/v/vspfiles/assets/images/blog.png" /><h2>Here's <span class="red-underline">how it works:</span></h2>
<p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
<p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>
</section>
CSS
.lightbulb {
}
.how { float:left; }
.how img { float:left; margin-right:10px; }
希望这对您有所帮助:)
如果您希望图像和文本居中对齐，请使用以下代码
HTML
<section class="what">
<h2>What is a <span class="red-underline">style tune-up?</span></h2>
<p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
<p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
<div class="test">
<img class="lightbulb" src="http://www.greeklifethreads.com/v/vspfiles/assets/images/blog.png" /><h2>Here's <span class="red-underline">how it works:</span></h2>
</div>
<p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
<p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>
</section>
CSS
.lightbulb {}
.how { margin:0 auto; width: 100%; text-align:center; }
.test { margin:0 auto; width: 50%; vertical-align:middle;}
.how img { float:left; }
.how p { clear:both;}
.how h2 { padding-top : 10px;}