CODEWITHSUNDEEP
htmlcss
Peter Pik
Peter Pik

Reputation: 11193

Align image and 2 text lines

I'm trying to align this div so that the image appear first and then the 2 lines after, however i cant seem to make it align proberly.

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

Upvotes: 0

Views: 54

Answers (3)

Hunter Turner
Hunter Turner

Reputation: 6894

The easiest, and most modern way is to use flexbox.

With this method, the image circle and the text will both be centered vertically, so you don't have to worry about it later.

Place your header-title and subtitle inside of a div.

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

Then add the following to your .list-item class:

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

(I also added margin-right: 10px; to your image so it looks better xD)

Here is a working JSFiddle

Upvotes: 1

Johannes
Johannes

Reputation: 67768

Wrap the two titles in a new DIV, then define that new DIV and the DIV of the image as inline-blocks, like this: (you'll have to finetune the margins for distances)

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

Upvotes: 0

Shoeb Mirza
Shoeb Mirza

Reputation: 918

Add float:left to that div. 

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

Working JSFIDDLE

Upvotes: 0

Related Questions