0

I have an image and some text inside a div and I'd like to put the image and the text div in the vertical center of the row div using CSS. The problem is that I don't know how many lines of text I will have but the text and the image must be ALWAYS in the middle. For example, when there's only one line of text the div should look like this:

####################################
#  _______                         #
# |       |                        #
# |       |                        #
# | IMAGE |    text text text      #
# |       |                        #
# |_______|                        #
#                                  #
####################################


and if more than one lines than it should looking like this:

####################################
#                                  #
#              text text text      #
#  _______     text text text      #
# |       |    text text text      #
# |       |    text text text      #
# | IMAGE |    text text text      #
# |       |    text text text      #
# |_______|    text text text      #
#              text text text      #
#              text text text      #
#                                  #
####################################

Here I have the jsfiddle which is my code and i want to solve this problem on attached fiddle.

jsfiddle: https://jsfiddle.net/vh3ewa54/
Note : This jsfiddle code Example is Based on Bootstrap Structure

mittal3795
  • 35
  • 1
  • 1
  • 12

4 Answers4

1

You should just modify your .right-image-section class like this: 

.right-image-section {
    padding: 100px 100px 100px 140px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
Vahid Boreiri
  • 3,418
  • 1
  • 19
  • 34
0

I found some links for you which explaining ind detail what you can do to achieve what you want: Best solution would be to use flexbox anyways.

Gerrit Halfmann
  • 1,332
  • 8
  • 17
0

Changes: .only-right-image .big-text .small-text .paddimg-set-right-image

.only-right-image {
float: left;}

.big-text {
font-size: 40px;
font-family: "Helvetica Light",Helvetica,sans-serif;
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

.small-text {
font-size: 17px;
margin-top: 20px;
font-family: "Helvetica Light", Helvetica, sans-serif;
line-height: 1.5;
vertical-align: middle;
}

.paddimg-set-right-image {
padding: 0 15px 0 0 !important;
text-align: center;line-height: 200px;
height: 200px;
}
Sagar Betkar
  • 26
  • 1
  • 5
0

.dis-flex{
       height:auto;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
         padding: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container dis-flex">
          <div class=" col-lg-7 col-md-7 col-sm-7 col-xs-7">
            <img src="https://fakeimg.pl/500x500/" alt="built" class="img-responsive  all-image-small" title="built-image">
            </div>
    
          <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 ">
             <h3>
               It's built like a tank.
             </h3>
              <p>
                  Thick aluminium panels are precision machined on a latest gen 5-axis CNC machine The .al looks and feels like a piece of precision engineering.
            </p>
            <p>
                  Thick aluminium panels are precision machined on a latest gen 5-axis CNC machine The .al looks and feels like a piece of precision engineering.
            </p>
            <p>
                  Thick aluminium panels are precision machined on a latest gen 5-axis CNC machine The .al looks and feels like a piece of precision engineering.
            </p>
          </div>
        </div>
Nikit Barochiya
  • 971
  • 11
  • 14