How to center text inside a bootstrap grid - html

Question

I have a grid divided into 2. One side holds an image and the other side some text. Currently it looks as follows:
I want to make it look as follows:
I am looking to get rid of the black spot and center the text. There is no issue in centering it horizontally but unable to do it vertically to fit nicely in relation to the image. Please advice if there is any pre built class already available in bootstrap or I need to rewrite additional CSS.
The following are my current html and css.
HTML
<div class="col-md-6 custom-info">
<img src="img/test.jpg" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
CSS
.custom-info{
background-color: #c0d023;
padding: 30px;
}
After Editing:

Answer 1

You may try this.
HTML
<div class="row xclassrow">
<div class="col-md-6 custom-info">
<img src="http://i.imgur.com/VpelmxT.png?1" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-left">
<div class="content">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
</div>
<h3>View the menu.</h3>
</div>
CSS
.xclassrow{
background-color:#C0D123
}
.content {padding:40px 0px}
.custom-info{
background-color: #c0d023;
padding: 30px;
}
Hope this works. Do comeback if still any issue.!!
EDIT : Removed the xclass and wrap the content in a new class. Check DEMO

Answer 2

TLDR;
Use display:table with display:table-cell to accomplish vertical centering of elements.
For newer browser you can use flexbox. I will demonstrate both approaches here.
Old but secure way (may not work for you here)
What I do most of the time is define 2 helper classes called t and td
*This works if you have a defined height of the containing element
The code then looks something like this:
HTML
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<div class="t">
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.t {
display: table;
height: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
height: 100%;
}
Jsfiddle
Old and even more secure way
Since you know that your 2 columns are 6+6 and that makes 12 columns total width.
Make 1 long element col-md-12 and make a table inside it (either with regular table elements or the helper classes i used in the above example.
HTML
<div class="col-12 specific-class">
<div class="t">
<div class="td">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.specific-class .td {
width: 50%;
background: rgba(0,0,0,.2);
}
.t { display: table; height: 100%; width: 100%; }
.td { display: table-cell; vertical-align: middle; height: 100%; }
Jsfiddle
Note: added vertical align to the image to remove small spacing under it
The mighty flexbox (the future looks bright)
Flexbox is a sight for sore eyes for us fe-devs and will be an integral building block of the future www.
HTML
<div class="col-12 specific-class">
<div class="fl-element">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="fl-element">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
CSS
.specific-class {
display: flex;
align-items: center;
}
.specific-class .fl-element {
width: 50%;
}
Jsfiddle