Centering content (dynamic output / text) in a DIV - php

Question

I'm researching all I can. And I am sure it is a dumb mistake, but...
I cannot for the life of me center the dynamic output displayed in a div.
All traditional methodologies seem to alter the divs themselves, not the content in the middle of the .input_des div.
The Goal: Center the dynamic content in .input_des without affecting anything else.
For background the CSS of the trouble spot looks like this:
.input_left{
position: relative;
left: 11%;
}
.input_img{
float: left;
width: 30%;
height: 100%;
margin-right: 25%;
top: 25%;
}
.input_des{
float: right;
width: 70%;
display: inline-block;
vertical-align: middle;
}
My HTML is:
<div class="input_left">
<div class="input_img">
<a href="product.php?id=' . $id . '">
<img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' .
$product_name . '" width="95%" height="16%" border="1"/>
</a>
</div>
<div class="input_des">' . $product_name . '<br />
$' . $price . '<br />
View Product Details
</div>
</div>
Any suggestions would be well received and much appreciated.
Gracias...
UPDATE: After taking a trying a few suggestions I finally found something that moved the text. It isn't perfect but at the moment I found adding to .input_des { margin-top: -20%;} that the dynamic content stays in the 'right lane' and adjusts upward. Each set of dynamic outputs (4 in total) aren't exactly aligned to their 'left lane' .input_img counterpart but they have moved upwards and look better than they did.
I will keep checking back for any additional info.
Thanks for taking the time to look at this and comment.

Answer 1

<div class="input_des">
<p>your content goes here</p>
</div>
.input_des p {
margin:5px auto;
}

Answer 2

You just need to add text-align: center; on the part that you want to center in your CSS or HTML code.
Or you may use <center> tag to each header that you want to center.

Answer 3

<script type="text/javascript">
$(document).ready(function()(){
$('.input_des').css('text-align','center');
});
</script>
try to put this line of code to the

Answer 4

I am not sure it works because I cant get the whole scene (I could if you have provided a fiddle), so I try to guess.
CSS
.input_des > * { display: inline-block; }
.input_des { text-align: center; float: right; width: 70%; display: block; vertical-align: middle; box-sizing: border-box; }
.input_img { box-sizing: border-box; float: left; width: 30%; height: 100%; padding-right: 25%; top: 25%; }
.input_left { position: relative; left: 11%; }
HTML
<div class="input_left">
<div class="input_img">
<a href="product.php?id=' . $id . '">
<img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' .
$product_name . '" width="95%" height="16%" border="1"/>
</a>
</div>
<div class="input_des"><span>' . $product_name . '<br />
$' . $price . '<br /></span>
View Product Details
</div>
</div>

Answer 5

Place an element inside the element with .input_des and assign the second element the css:
margin-left:auto;
margin-right:auto;
Place the dynamic info in the second element.
Edit - the second element inside the .input_des - element might have to have a fixed width also.
Also - did you check this?: How to horizontally center a <div> in another <div>?
Might inspire. Same principle I think, where the first div is your floating div.
Here is an example where the content inside the "centered" div is centered inside the "input_des"-div:
<style type="text/css">
.input_left
{
position: relative;
left: 11%;
}
.input_img
{
float: left;
width: 30%;
height: 100%;
margin-right: 25%;
top: 25%;
}
.input_des
{
float: right;
width: 70%;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
}
.centered
{
width: 75%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: maroon;
}
</style>
<div class="input_left">
<div class="input_img">
I AM CONTENT
</div>
<div class="input_des">
<div class="centered">
I AM CONTENT
</div>
</div>
</div>