html - flex 盒中元素之间的间距

Question

我有一个带有图像和文本的 flex 容器。该图像位于 <div>并且文本位于 <ul> and <li> 内元素。 <li>是另一个 flex 容器，用于对齐中心的文本。但是，<li> 之间有一个空格。容器和 child <div>第一个容器的。有没有办法去除空间并将其垂直居中？我用过margin-left:-4%;删除空间。这是正确的方法吗？

目前看起来是这样的:

删除空间并垂直居中对齐，这就是我想要的样子-

CSS:

.headlineContainer{
  display:flex;
  border: red 2px solid;
  justify-content: flex-start;
}

#myPhoto{
  width:10%;
  border: blue 2px solid;
  
}


#myPhoto>img{
  width: 100%;
}

#myHeadline{
  border: green 2px solid;
  list-style-type: none;
  margin-left:-2%;
}

#myHeadline li{
  display: flex;
  border: 2px solid gray;
  justify-content: center;
  
}

#myHeadline #name{
   color: #008080;
     font-size: 340%;
     font-weight: 300;
     font-style:normal;
}

#myHeadline #Tagline{
  font-size: 150%;
    color:#000000;
}

密码:https://codepen.io/chandeeparora19/pen/oNxBNqL

Answer 1

在css中，我标记了移植物。没有空格并且已设置垂直对齐。

带边框的选项:

.headlineContainer{
  display:flex;
  border: red 2px solid;
  justify-content: flex-start;
  align-items: center; /*add - vertical center*/
}

#myPhoto{
  width:10%;
  border: blue 2px solid;
  
}


#myPhoto>img{
  width: 100%;
}

#myHeadline{
  border: green 2px solid;
  list-style-type: none;
  padding: 0; /*add - remove space*/
}

#myHeadline li{
  display: flex;
  border: 2px solid gray;
  justify-content: center;
  
}

#myHeadline #name{
   color: #008080;
     font-size: 340%;
     font-weight: 300;
     font-style:normal;
}

#myHeadline #Tagline{
  font-size: 150%;
    color:#000000;
}

<div id="mainContainer" class="headlineContainer" > 
    <div id="myPhoto">
            <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/googleplus512x512.png"/>

    </div>
    
    <ul id="myHeadline">
      <li id="name">This is google</li>
      <li id="Tagline">Helps you search everything</li>
  </ul>
</div>

无边框选项:

.headlineContainer{
  display:flex;
  border: red 2px solid;
  justify-content: flex-start;
  align-items: center; /*add - vertical center*/
}

#myPhoto{
  width:10%;
  /*border: blue 2px solid;*/
  
}


#myPhoto>img{
  width: 100%;
}

#myHeadline{
  /*border: green 2px solid;*/
  list-style-type: none;
  padding: 0; /*add - remove space*/
}

#myHeadline li{
  display: flex;
  /*border: 2px solid gray;*/
  justify-content: center;
  
}

#myHeadline #name{
   color: #008080;
     font-size: 340%;
     font-weight: 300;
     font-style:normal;
}

#myHeadline #Tagline{
  font-size: 150%;
    color:#000000;
}

<div id="mainContainer" class="headlineContainer" > 
    <div id="myPhoto">
            <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/googleplus512x512.png"/>

    </div>
    
    <ul id="myHeadline">
      <li id="name">This is google</li>
      <li id="Tagline">Helps you search everything</li>
  </ul>
</div>