Question

我正在尽我所能地研究。我确信这是一个愚蠢的错误，但...... 我不能为我的生活中心显示在div中的动态输出。

所有传统方法似乎都会改变div本身，而不是.input_des div中间的内容。

目标：将.input_des中的动态内容居中，而不会影响其他任何内容。对于背景，故障点的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;
    }

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

 </div>

任何建议都会受到好评并非常感谢。

格拉西亚斯......

更新：在尝试了一些建议后，我终于发现了一些移动文本的内容。这并不完美，但目前我发现增加了.input_des {margin-top：-20％;}动态内容保持在“右侧车道”并向上调整。每组动态输出（总共4个）并不完全与它们的“左侧车道”.input_img对应，但它们向上移动并且看起来比它们更好。

我会继续检查任何其他信息。

感谢您抽出宝贵时间查看此内容并发表评论。

Answer 1

使用.input_des将元素放在元素内，并为css分配第二个元素：保证金左：自动; 余量右：汽车;

将动态信息放在第二个元素中。

编辑 - .input_des - 元素中的第二个元素也可能必须具有固定的宽度。

另外 - 你检查过这个吗？：How to horizontally center a <div> in another <div>?

可能会激发灵感。我认为相同的原则，第一个div是你的浮动div。

这是一个示例，其中“居中”div内的内容居中于“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>

Answer 2

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

.input_des p {
   margin:5px auto;
}

Answer 3

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

尝试将这行代码放到

Answer 4

您只需要在要在CSS或HTML代码中居中的部分添加text-align: center;即可。

或者您可以将<center>标记用于您想要居中的每个标题。

Answer 5

我不确定它是否有效，因为我无法得到整个场景（如果你提供了小提琴，我可以），所以我试着猜测。

<强> 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>

在DIV中居中内容（动态输出/文本）

5 个答案: