Vertically Centered Text To Left Of Image Bootstrap

bootstrap
#1

I have some html with an image 430x240 to the right, and some text to the left. It's set up in a bootstrap row, but I'm not sure how to make the style so that the text on the left is centered vertically and horizontally.

CSS

. 

	     box{

              background-color:white;

            }

   .hero-article-box{

	text-align:center;

  }

          <div class="box hero-article-box">
				<div class="row">
					<div class="col-lg-3">
						<span>J Rent On Sound Master Mixtape</span>
					</div>
					<div class="col-lg-9">
						<img src="imgs/heroarticle.png" />
					</div>
				</div>
			 </div>
#2

Unfortunately bootstrap makes the simple things like this much too awkward and reliant on magic numbers because the columns are created by floats which bear no relationship to each other. You would need to hard code the height (CSS magic numbers) of the floats and that would be prone to error and not robust enough for a fluid approach.

I would simply come out of the grid and do this:

.hero-article-box {
	text-align:center;
	background-color:red;
	display:table;
	width:100%;
}
.tc {
	display:table-cell;
	vertical-align:middle;
}
.imgcell img {
	max-width:100%;
	height:auto;
}
@media screen and (max-width:768px){
	.hero-article-box,.tc{display:block;padding:10px 0;}
}

<div class="container">
  <div class="box hero-article-box">
    <div class="tc caption">J Rent On Sound Master Mixtape</div>
    <div class="tc imgcell"> <img src="http://via.placeholder.com/430x240"> </div>
  </div>
</div>

Remember just because you use bootstrap there's no need to force things into the bootstrap grid when there are much easier methods around.:slight_smile:

closed #3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.