在同一`
`中对齐文本和图像。

huangapple go评论58阅读模式
英文:

Aligning text with image in same div

问题

Examples:

示例:

在同一`<div>`中对齐文本和图像。

在同一`<div>`中对齐文本和图像。

在同一`<div>`中对齐文本和图像。

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:

在同一`<div>`中对齐文本和图像。

在同一`<div>`中对齐文本和图像。

在同一`<div>`中对齐文本和图像。

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 -->

&lt;div class=&quot;logo&quot;&gt;
    &lt;img src=&quot;img/favicon/favicon.png&quot; alt=&quot;&quot;&gt;
    &lt;a href=&quot;#&quot;&gt;LABFOLD&lt;/a&gt;
&lt;/div&gt;

<!-- 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 -->

&lt;div class=&quot;logo&quot;&gt;
  &lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png&quot; alt=&quot;&quot;&gt;
  &lt;a href=&quot;#&quot;&gt;LABFOLD&lt;/a&gt;
&lt;/div&gt;

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

huangapple
  • 本文由 发表于 2023年2月24日 11:38:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/75552404.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定