flexbox中项目之间的间距[重复]答案

【问题标题】：Spacing in between items in a flexbox [duplicate]flexbox中项目之间的间距[重复]
【发布时间】：2020-12-12 05:53:30
【问题描述】：

我有一个带有图像和文本的 flex 容器。图片位于<div> 中，文本位于<ul> and <li> 元素中。 <li> 是另一个 flex 容器，用于在中心对齐文本。但是，<li> 容器和第一个容器的子 <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

【问题讨论】：

它不是 flex，而是 ul 上的默认填充：重置它：ul{padding:0;}
这样？ - ibb.co/cx341MD

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

在这种情况下，您应该重置您的padding。

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

【讨论】：

【解决方案3】：

我为 headerContainer 和 myphoto 和 text 添加了 display:table 而不是 flex，我添加了 display:table-cell 和 verical-align:middle

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

#myPhoto{
  width:10%;
  border: blue 2px solid;
  display:table-cell;
  vertical-align:middle;
}

ul {
  padding:0px
}
#myPhoto>img{
  width: 100%;
  display:inline-block;
  vertical-align:middle;
}

#myHeadline{
  border: green 2px solid;
  list-style-type: none;
   display:inline-block;
  vertical-align:middle;
}

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

【讨论】：