英文:
Aligning text with image in same div
问题
Examples:
示例:
Any help is appreciated!
任何帮助都将不胜感激!
.navbar .logo a {
color: #ececec;
font-size: 1.5rem;
font-weight: 700;
}
.logo img {
width: 30px;
}
英文:
I'm having trouble figuring out how to perfectly align my text and image.
Examples:
Any help is appreciated!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.navbar .logo a {
color: #ececec;
font-size: 1.5rem;
font-weight: 700;
}
.logo img {
width: 30px;
}
<!-- language: lang-html -->
<div class="logo">
<img src="img/favicon/favicon.png" alt="">
<a href="#">LABFOLD</a>
</div>
<!-- end snippet -->
答案1
得分: 1
使用弹性盒子(flex box)来完美对齐它们
.logo {
display: flex;
align-items: center;
justify-content: center;
}
.navbar .logo a {
color: #ececec;
font-size: 1.5rem;
font-weight: 700;
}
.logo img {
width: 30px;
}
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png" alt="">
<a href="#">LABFOLD</a>
</div>
英文:
Use flex box to align them perfectly
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.logo {
display: flex;
align-items: center;
justify-content: center;
}
.navbar .logo a {
color: #ececec;
font-size: 1.5rem;
font-weight: 700;
}
.logo img {
width: 30px;
}
<!-- language: lang-html -->
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png" alt="">
<a href="#">LABFOLD</a>
</div>
<!-- end snippet -->
答案2
得分: 1
你可以使用 flexbox
来实现这个效果:
.logo {
display: flex;
align-items: center;
}
我还会为图像添加一些右边距,这样它就不会紧贴在标志文本上:
.logo img {
width: 30px;
margin-right: 10px;
}
英文:
You can use flexbox
to do so:
.logo {
display: flex;
align-items: center;
}
I'd also add some right margin to the image so it's not sticking with the logo text:
.logo img {
width: 30px;
margin-right: 10px;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论