当前位置：文江博客话题详情

在文本中间位置图标

发布于 2025-02-11 23:16:34 字数 169 浏览 2 评论 0原文

我在CSS中定位有问题。现在我有了这样的图标和文字：

icon ，

但我想让图标转到文本的中间。我该怎么做？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

画骨成沙 2025-02-18 23:16:35

您可以使用 flex 。

实时代码： codepen html

html：

   <div class='alert'>
      <span class='alert-icon'>icon</span>
      <div class='alert-content'>
        <div>text</div>
        <div>text</div>
        <div>text</div>
      </div>
      <span class='alert-close-icon'> close icon </span>
   </div>

css：

.alert {
  background-color: red;
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 250px;
  border-radius: 6px;
  padding: 10px 10px
}

只需添加图像，然后将图像替换为<代码> .Alert-icon .Alert-close-icon

You can use Flex.

Live code: Codepen

HTML:

   <div class='alert'>
      <span class='alert-icon'>icon</span>
      <div class='alert-content'>
        <div>text</div>
        <div>text</div>
        <div>text</div>
      </div>
      <span class='alert-close-icon'> close icon </span>
   </div>

CSS:

.alert {
  background-color: red;
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 250px;
  border-radius: 6px;
  padding: 10px 10px
}

Just add the images and replace them with the text inside .alert-icon .alert-close-icon

回复收藏 0 原文

苍暮颜 2025-02-18 23:16:35

只需使用显示：flex和align-items：center在两个元素块的父容器上对齐。

.inlineElements {
  display: flex;
}

.alignItemsCenter {
  display: flex;
  align-items: center; /* Pack items around the center */
}

.content {
  margin: 0 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="inlineElements">

  <div class='alignItemsCenter'>
    <i class="fa-regular fa-circle-xmark"></i>
    
    <div class="content">
      <div>
        Hello
      </div>
      <div>
        Display
      </div>
      <div>
        Flex
      </div>
    </div>
  </div>
  
  <i class="fa-solid fa-xmark"></i>
<div>

Just use display: flex and align-items: center on the parent container of two block of elements to aligns.

.inlineElements {
  display: flex;
}

.alignItemsCenter {
  display: flex;
  align-items: center; /* Pack items around the center */
}

.content {
  margin: 0 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="inlineElements">

  <div class='alignItemsCenter'>
    <i class="fa-regular fa-circle-xmark"></i>
    
    <div class="content">
      <div>
        Hello
      </div>
      <div>
        Display
      </div>
      <div>
        Flex
      </div>
    </div>
  </div>
  
  <i class="fa-solid fa-xmark"></i>
<div>

回复收藏 0 原文

~没有更多了~