Nedim Kurt Nedim Kurt - 2 years ago 143
HTML Question

How to set a div next to an image and center it vertically?

I want to know how to place an image next to a div and center the div (progress bar) vertically?

What I want to do:

enter image description here
Here is my code for the progress bar:

<div class="progressbar">
<div class="skill"><span>HTML 5</span></div>

.progressbar {
background-color: black;
border-radius: 25px;
padding: 3px;
width: 200px;

.progressbar > div {
background-color: #FDEE18;
width: 175px;
height: 20px;
border-radius: 10px;

.skill span {
padding-left: 10px;

Answer Source

You can do it with display: table and display:table-cell; like this :


img { height: 60px;  display: table-cell;  }
#container { display: table;}
.container-progress { display: table-cell; vertical-align: middle; padding-left: 10px;}


<div id="container">
  <img src="" alt="">
  <div class="container-progress">
    <div class="progressbar">
      <div class="skill"><span>HTML 5</span></div>

Live example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download