CODEWITHSUNDEEP
htmlcss
Olivier Pons
Olivier Pons

Reputation: 15816

Vertical-align with text in a div doesnt work

Here's the fiddle.

From the explanation here, and here How to use vertical-align: middle; properly? and... a lot of other ones, but I just want to vertical align my text in all divs that are immediate children of the class irow..

If I add an image with style vertical-align: middle;, the text following seems to be aligned. If I remove the image, text is not aligned anymore. I've tried to follow the suggestion here which puts the text in a span and apply vertical-align to the span without success. I tried with the hack position:relative;top:50% without success too. So here's the solution that aligns the text, but, of course, I want to make it work on all divs, and without the image!

<style>
.irow > div {
    height: 80px;
    min-height: 60px;
}
.irow div:nth-child(4n+1), .irow div:nth-child(4n+2) {
  background-color: #2b669a;
}
.irow div:nth-child(4n+3), .irow div:nth-child(4n+4) {
  background-color: #46b8da;
}
</style>
<div class="irow">
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès va morfler grave
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès que des mots&nbsp;!
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
</div>

Any help would be greatly appreciated!

Upvotes: 0

Views: 54

Answers (1)

Pepo_rasta
Pepo_rasta

Reputation: 2900

there are two ways: 1) simulate the presence of img using :before :

.irow > div {
    height: 80px;
    min-height: 60px;
}
.irow > div:before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:0;
  height:80px;
}
.irow div:nth-child(4n+1), .irow div:nth-child(4n+2) {
  background-color: #2b669a;
}
.irow div:nth-child(4n+3), .irow div:nth-child(4n+4) {
  background-color: #46b8da;
}
<div class="irow">
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès va morfler grave
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès que des mots&nbsp;!
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
</div>

or 2) simply use line-height for one-lined text(wont work for multilined text):

.irow > div {
    height: 80px;
    min-height: 60px;
    line-height:80px;
}
.irow div:nth-child(4n+1), .irow div:nth-child(4n+2) {
  background-color: #2b669a;
}
.irow div:nth-child(4n+3), .irow div:nth-child(4n+4) {
  background-color: #46b8da;
}
<div class="irow">
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès va morfler grave
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès que des mots&nbsp;!
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
</div>

to be honest, there are much more ways, such as using display:table-cell or display flex, but i dont like them

Upvotes: 1

Related Questions