0

I have two divs. First one has a image file and the other one has a username. I just want to align the second div vertically center just like this way.

enter image description here

But this one is not aligned perfectly. This screen already coded but the problem is that I still couldn't figure out the perfect way to align middle the user name div. I just use my naked eye and adjust padding.

Here is the my code 

.tag-header {
    padding: 12px;
    overflow: auto;
}
.tag-header .tag-header-img {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    float: left;
}

.tag-header .info {
    padding: 14px 11px;
    display: inline-block;
    font-size: 1.3rem;
    line-height: 14px;
}

.tag-header .info p {
    margin: 0;
    font-weight: 600;
    line-height: 1;
    font-size: 1.3rem;
}
.tag-header .time {
    display: block;
    font-size: 1.2rem;
}
.info span {
    font-weight: 300;
    color: #b9b9b9;
}

<div class="tag-header">
        <div class="col-md-6">
            <div class="row">
                <img class="tag-header-img" src="http://blog.couchbase.com/binaries/content/gallery/speakers/kirkk.jpg" alt="">
                <div class="info">
                    <p>John Stevens</p>
                    <span class="time">2 minutes ago</span>
                </div>
            </div>
        </div>

fiddle

Any solution?

Janath
  • 1,218
  • 4
  • 26
  • 53
  • It looks just like the image you attached... – odedta Nov 19 '16 at 13:40
  • You could also play with the height of the row, for example, give it height 60px and then the username padding 12px but that will effect responsiveness so you would have to take that into account as well. I really don't see the problem here, your code matches the image you attached – odedta Nov 19 '16 at 13:44
  • you want a vertical align I guess ? – Blag Nov 19 '16 at 13:44
  • Duplicate of http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 I think – Blag Nov 19 '16 at 14:13
  • @odedta: Yes the code does match with image but not perfectly aligned. Yes I need a vertical align. – Janath Nov 19 '16 at 15:12

3 Answers3

1

You seem to have done an ok job making them both have the same height, the image doesn't have to use float: left;, you can also use display: inline-block; on it and vertical-align: middle; on both the image and the name, this way you don't need them to have the same height.

Also, make sure you use Bootstrap properly, you first need a "container" div, in the container you put a row, and in that row you put columns.

You only put a div with a row class in a column div if you want more columns in that column.

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
</div>
Ioan-Radu Tanasescu
  • 546
  • 4
  • 17
1

Heres your fiddle updated https://jsfiddle.net/p4x7d3fq/5/ -- i added borders just so you can see.

Using display:table-cell you can achieve this, if you don't mind the slight changes, including the addition of a height to match that of your image.

Stuart
  • 6,630
  • 2
  • 24
  • 40
0

Try to use flexbox:

.info {
  display: flex;
}
Johannes
  • 64,305
  • 18
  • 73
  • 130