Asem H Asem H - 3 months ago 10
HTML Question

How do I keep an image and text centered vertically with bootstrap?

I am working on a bootstrap site and now am at a section where I am trying to make text on the left and an image on the right. I got that all down, but am having a very hard time centering the image vertically. I am messing with the paddings and margins but it keeps coming out funky.

Here's an image of what I am doing:

enter image description here

Here's my code for this section:

HTML

<!-- Section 1 -->
<div class="cssSection cssCenter">
<div class="container">

<div class="row">
<div class="col-sm-7">
<p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
</div>

<div class="col-sm-5">
<img class="img-center img-responsive" src="http://placehold.it/300x300">
</div>
</div>

</div>
</div>


CSS

.cssCenter {
text-align: center;
}

.cssSection {
padding: 120px 0 70px;
}

.cssInformation {
font-size: 18px;
}

.img-center {
margin: auto;
}


Can anyone help me understand how I can align the image with the text on the left in the correct way? It will be greatly appreciated.

Thanks in advanced

Answer

Try this and please let me know your feedback!

Used a flexbox like this:

.cssSection .row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

and for responsive requirement, I have this:

@media only screen and (max-width: 650px) {

   .cssSection .row {
      flex-direction: column;
    }
}

.cssCenter {
    text-align: center;
}

.cssSection {
    padding: 120px 0 70px;
}

.cssSection .row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

.cssInformation {
    font-size: 18px;
}

.img-center {
    margin: auto;
}

@media only screen and (max-width: 650px) {

   .cssSection .row {
      flex-direction: column;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<!-- Section 1 -->
<div class="cssSection cssCenter">
    <div class="container">

        <div class="row">
            <div class="col-sm-7">
                <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
            </div>

            <div class="col-sm-5">
                    <img class="img-center img-responsive" src="http://placehold.it/300x300">
            </div>
        </div>

    </div>
</div>
  </body>

Comments