-3

I want to try and have the div that contains the image on the left to be centered vertically. I have tried numerous things but I keep running into issues.

weekly-middle is the container div to the div which is left which contains the image that I want centered.

The text is already centered.

.weekly-middle {
  text-align: center;
  width: 100%;
  /* height:100%;*/
  border: none;
  border-collapse: collapse;
  margin: 0px;
  padding-top: 56px;
  padding-bottom: 56px;
  content: "";
  display: table;
  /*clear: both;*/
}

.left {
  text-align: left;
  padding: 20px;
  width: 100px;
  float: left;
  /* padding-top: 56px; 
 padding-bottom: 56px;*/
  vertical-align: middle;
  height: 300px
}

.right {
  margin-left: 100px;
  float: left;
  padding-top: 56px;
  padding-bottom: 56px;
}
<div class="weekly-middle teal">
  <div class="left">
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
  </div>
  <div class="right">
    <h1>Some Title</h1>
    <p class="title">Problems Solved</p>
  </div>
</div>

Solution provided in comment below

Refer to Joseph Marikle comment with link to JSFiddle.

mcv
  • 1,232
  • 2
  • 16
  • 39
  • 1
    Instead of: `display: table` use `display: inline-block;`, then the `vertial-align: middle` will work ;) – Troyer Apr 25 '17 at 14:41
  • 1
    The question that this was marked as a duplicate of is not remotely similar to this question... – Joseph Marikle Apr 25 '17 at 14:44
  • 1
    @mcv you're trying to use `display:table`, but in order to do that, you also need to have some element inside of the wrapper that has `display:table-cell`. You have a table but no cells. You also, shouldn't explicitly declare a height on the left column. Lastly, don't float the columns. Once you have `display:table-cell` on them, they'll line up accordingly: https://jsfiddle.net/L8txsvLx/ – Joseph Marikle Apr 25 '17 at 14:47
  • Thank yo @JosephMarikle I have been searching and have not found a soultion – mcv Apr 25 '17 at 14:57

4 Answers4

0

Use flexbox. It's a very powerfull CSS tool : 

.left {
  text-align: left;
  padding: 20px;
  width: 100px;
  float: left;
  /*    padding-top: 56px; 
    padding-bottom: 56px;*/
  vertical-align: middle;
  height: 300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
Baptiste Arnaud
  • 1,840
  • 3
  • 14
  • 42
0

you can try following code

 <div class="left">
  <div class="display-table"> 
      <div class="display-table-cell">
<img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
      </div>
 </div>

and for the css you can write:

.display-table{
     display: table;
     width:100%;
 }
 .display-table-cell{
      display:table-cell;
      vertical-align: middle;
      text-align:left;
      height: 100px;// your choose
 }
Obaidul Kader
  • 217
  • 1
  • 7
0

add this to your css, hope it helps:

.weekly-middle img {
margin-top:50%;
}


.weekly-middle {
  text-align: center;
  width: 100%;
  /* height:100%;*/
  border: none;
  border-collapse: collapse;
  margin: 0px;
  padding-top: 56px;
  padding-bottom: 56px;
  content: "";
  display: table;
  /*clear: both;*/
  
}
.weekly-middle img {
margin-top:50%;
}

.left {
  text-align: left;
  padding: 20px;
  width: 100px;
  float: left;
  /* padding-top: 56px; 
 padding-bottom: 56px;*/
  vertical-align: middle;
  height: 300px
}

.right {
  margin-left: 100px;
  float: left;
  padding-top: 56px;
  padding-bottom: 56px;
}
<div class="weekly-middle teal">
  <div class="left">
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
  </div>
  <div class="right">
    <h1>Some Title</h1>
    <p class="title">Problems Solved</p>
  </div>
</div>
Jordi Flores
  • 1,870
  • 5
  • 15
0

I think you should be able to just remove the 'left' and 'right' classes from the inner divs and it will work.

See if what you're looking for is below.

.weekly-middle {
  text-align: center;
  width: 100%;
  /* height:100%;*/
  border: none;
  border-collapse: collapse;
  margin: 0px;
  padding-top: 56px;
  padding-bottom: 56px;
  content: "";
  display: table;
  /*clear: both;*/
}

.left {
  text-align: left;
  padding: 20px;
  width: 100px;
  float: left;
  /* padding-top: 56px; 
 padding-bottom: 56px;*/
  vertical-align: middle;
  height: 300px
}

.right {
  margin-left: 100px;
  float: left;
  padding-top: 56px;
  padding-bottom: 56px;
}
<div class="weekly-middle teal">
  <div class="">
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
  </div>
  <div class="">
    <h1>Some Title</h1>
    <p class="title">Problems Solved</p>
  </div>
</div>
Zach
  • 26
  • 6