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

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

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

  1. .navbar .logo a {
  2.   color: #ececec;
  3.   font-size: 1.5rem;
  4.   font-weight: 700;
  5. }
  6. .logo img {
  7.   width: 30px;
  8. }

<!-- language: lang-html -->

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

<!-- end snippet -->

答案1

得分: 1

使用弹性盒子（flex box）来完美对齐它们

  1. .logo {
  2.   display: flex;
  3.   align-items: center;
  4.   justify-content: center;
  5. }
  7. .navbar .logo a {
  8.   color: #ececec;
  9.   font-size: 1.5rem;
  10.   font-weight: 700;
  11. }
  13. .logo img {
  14.   width: 30px;
  15. }
  1. <div class="logo">
  2.   <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="">
  3.   <a href="#">LABFOLD</a>
  4. </div>
英文:

Use flex box to align them perfectly

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .logo {
  2.   display: flex;
  3.   align-items: center;
  4.   justify-content: center;
  5. }
  7. .navbar .logo a {
  8.   color: #ececec;
  9.   font-size: 1.5rem;
  10.   font-weight: 700;
  11. }
  13. .logo img {
  14.   width: 30px;
  15. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;logo&quot;&gt;
  2.   &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;
  3.   &lt;a href=&quot;#&quot;&gt;LABFOLD&lt;/a&gt;
  4. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

你可以使用 flexbox 来实现这个效果：

  1. .logo {
  2.   display: flex;
  3.   align-items: center;
  4. }

我还会为图像添加一些右边距，这样它就不会紧贴在标志文本上：

  1. .logo img {
  2.   width: 30px;
  3.   margin-right: 10px;
  4. }
英文:

You can use flexbox to do so:

  1. .logo {
  2.   display: flex;
  3.   align-items: center;
  4. }

I'd also add some right margin to the image so it's not sticking with the logo text:

  1. .logo img {
  2.   width: 30px;
  3.   margin-right: 10px;
  4. }

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

发表评论

匿名网友

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

确定