Position icon in the middle of the text-CodePudding

I am having an issue with positioning in CSS. Now I have an icon and text like this :

But I want to make the icon go to the middle of the text. How do I do that?

CodePudding user response：

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

CodePudding user response：

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 >

  <div class='alignItemsCenter'>
    <i ></i>
    
    <div >
      <div>
        Hello
      </div>
      <div>
        Display
      </div>
      <div>
        Flex
      </div>
    </div>
  </div>
  
  <i ></i>
<div>