Question

我正在尝试对齐这个div，使图像首先显示，然后显示2行，但是我似乎无法使其清晰对齐。

#overview {
  width: 350px;
  height: 500px;


  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
}

#overview #header-collapse {
    height: 50px;
    width: 100%;
    background-color: #ff8217;
    color: #fff;
    font-size: 15px;
    line-height: 50px;
    white-space: nowrap;
    -moz-border-radius: 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px; 
    text-align: center;
    
    
   
}

#overview #body-list {
    background: #fff;
    height:450px;
    overflow-y: auto;
    width: 100%;
    
    border-radius: 0px 0px 3px 3px; 
     -webkit-border-radius: 0px 0px 3px 3px; 
    border-radius: 0px 0px 3px 3px; 
}

#overview #body-list a {
  text-decoration:none;
}

.list-item:hover {
  background-color: rgba(82, 82, 82, .1);
}
 



.list-item {
  border-bottom: 1px solid rgba(82, 82, 82, .2);
  height: 80px;
  width: 100%;
  padding-left: 10px;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
    position: relative;
}


.list-item p {
  margin: 0px;
}
.list-item #header-title {
  color: #954500;
  font-size: 20px;
  font-weight: 400;

}

.list-item #subtitle {
  color: rgb(82, 82, 82);
  opacity: 0.6;
  font-size: 13px;

}

.list-item #list-image {
  height: 60px;
  width: 60px;
  background-color: #000;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

<div id="overview">
  <div id="header-collapse">
        <h4>
        Oversigt
        </h4>
    </div>
     <div id="body-list">
     <a href="#">
      <div class="list-item">
        <div id="list-image"></div>
          <p id="header-title">Title</p>   
          <p id="subtitle">Subtitle</p>
      </div>
      </a>
     
    </div>


</div>

Answer 1

最简单，最现代的方法是使用flexbox。

使用此方法，图像圈和文本都将垂直居中，因此您不必在以后担心。

将header-title和subtitle放在div中。

<div class="list-titles">
  <p id="header-title">Title</p>   
  <p id="subtitle">Subtitle</p>
</div>

然后将以下内容添加到.list-item课程中：

.list-item {
  display: flex;
  align-items: center;
}

（我还在您的图片中添加了margin-right: 10px;，因此它看起来更好xD）

这是一个有效的JSFiddle

Answer 2

将两个标题包装在一个新的DIV中，然后将新的DIV和图像的DIV定义为内联块，如下所示:(您必须微调距离的边距）

＆＃13;

#overview {
  width: 350px;
  height: 500px;


  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
}

#overview #header-collapse {
    height: 50px;
    width: 100%;
    background-color: #ff8217;
    color: #fff;
    font-size: 15px;
    line-height: 50px;
    white-space: nowrap;
    -moz-border-radius: 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px; 
    text-align: center;
    
    
   
}

#overview #body-list {
    background: #fff;
    height:450px;
    overflow-y: auto;
    width: 100%;
    
    border-radius: 0px 0px 3px 3px; 
     -webkit-border-radius: 0px 0px 3px 3px; 
    border-radius: 0px 0px 3px 3px; 
}

#overview #body-list a {
  text-decoration:none;
}

.list-item:hover {
  background-color: rgba(82, 82, 82, .1);
}
 



.list-item {
  border-bottom: 1px solid rgba(82, 82, 82, .2);
  height: 80px;
  width: 100%;
  padding-left: 10px;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
    position: relative;
}


.list-item p {
  margin: 0px;
}
.list-item #header-title {
  color: #954500;
  font-size: 20px;
  font-weight: 400;

}

.list-item #subtitle {
  color: rgb(82, 82, 82);
  opacity: 0.6;
  font-size: 13px;

}

.list-item #list-image {
  height: 60px;
  width: 60px;
  background-color: #000;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
#list-image, #title-wrapper {
   display: inline-block;
}

＆＃13;

<div id="overview">
  <div id="header-collapse">
        <h4>
        Oversigt
        </h4>
    </div>
     <div id="body-list">
     <a href="#">
      <div class="list-item">
        <div id="list-image"></div>
          <div id="title-wrapper">
            <p id="header-title">Title</p>   
            <p id="subtitle">Subtitle</p>
          </div>
      </div>
      </a>
     
    </div>


</div>

＆＃13;

Answer 3

将float:left添加到该div。

.list-item #list-image {float:left;}

工作JSFIDDLE

对齐图像和2个文本行

3 个答案: