Centering content (dynamic output / text) in a DIV

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 />
   <a href="product.php?id=' . $id . '">View Product Details</a>
   </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.

nothing here help? http://stackoverflow.com/search?q=Centering+content+%5Bcss%5D — SW4, Aug 06 '14 at 08:06

score 0 · Answer 1 · edited May 23 '17 at 11:53

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>

score 0 · Answer 2 · edited Aug 06 '14 at 08:35

0

<div class="input_des">
   <p>your content goes here</p>
</div>

.input_des p {
   margin:5px auto;
}

edited Aug 06 '14 at 08:35

tomrozb

25,773
31
101
122

answered Aug 06 '14 at 08:11

user3894236

114
2
14

Somwang Souksavatd · Answer 3 · 2014-08-06T09:04:30.103

0

<script type="text/javascript">
$(document).ready(function()(){
     $('.input_des').css('text-align','center');
});
</script>

try to put this line of code to the

edited Aug 06 '14 at 09:04

answered Aug 06 '14 at 08:40

Somwang Souksavatd

4,947
32
30

Unfortunately, this centered the content under the .input_img. This has been the problem with everything I have tried thus far.... I am trying to center the content within the .input_des while keeping .input_des horizontally aligned with .input_img. Thank you for taking the time to give it a go though. – newneub Aug 06 '14 at 08:52
ok, have you try to use jQuery to set the element attribute to center after css or related setting loaded, – Somwang Souksavatd Aug 06 '14 at 08:57

score 0 · Answer 4 · answered Aug 06 '14 at 08:51

0

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.

answered Aug 06 '14 at 08:51

jned29

477
12
50

score 0 · Answer 5 · answered Aug 06 '14 at 10:38

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>
   <a href="product.php?id=' . $id . '">View Product Details</a>
   </div>    
</div>

Centering content (dynamic output / text) in a DIV

5 Answers5