0

我正在尝试调整 CSS，使“产品”和产品信息居中而不是向左浮动我无法通过添加到 WP 帖子中的短代码来调整 HTML，但也许我可以将它包装在 div 中？

HTML：

<ul class="products ribbon"> 
    <li class="product last first">
    <a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
        <div class="thumbnail">
    <span class="onsale">Sale!</span>   
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />         
   <div class="thumb-shadow"></div>
     <strong class="below-thumb">Estella Rose Designs</strong> 
</div>
    <span class="price"><span class="from">From: </span><del><span class="amount">&#36;25</span></del> <ins><span class="amount">&#36;19.95</span></ins></span>     
    </a>  
    <div class="buttons">
                <a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/" data-product_id="2221" class="add-to-cart add_to_cart_button product_type_variable">Select options</a></div>           
</li></ul>

CSS：

CSS

4

3 回答 3

1

好的，既然我更好地理解了你的问题，让我们再试一次。所以你想把 <ul> 元素作为一个整体居中？这比我最初认为的要简单得多。

为此，您需要做的就是将 <ul> 元素包装在一个设置为显示为内联块的 span 标记中。然后设置包含元素，使其文本居中。

尝试这个：

<html>
  <head>
    <style language="text/css">
      /*<![CDATA[ */
      #test1 {
        text-align: center;
      }
      #test2 {
        display: inline-block;
        text-align: left;
      }
      /* ]]> */
    </style>
  </head>
  <body>
    <div id="test1">
      <span id="test2">
        <!-- Place your <ul> element here -->
      </span>
    </div>
  </body>
</html>

这个怎么运作

  • “test2”元素设置为显示为内联块，这意味着它与文本内联显示。这意味着它可能会受到操纵文本行的属性的影响，例如“文本对齐”。
  • 在“test1”元素上将“text-align”设置为“center”会使内联内容——在本例中为“test2”元素——在屏幕上居中。

使块居中的标准方法是将“margin-right”和“margin-left”属性设置为“auto”，但这仅适用于显示为块且宽度小于 100% 的元素.

于 2013-02-13T22:06:57.790 回答
0

它看起来像文本“Sale！”的原因 浮动到左边的是 <img> 元素默认显示为内联块，因此图像与“Sale！”字样位于同一行文本中。紧跟在文本“Sale！”之后的 <br /> 标签 会解决这个问题；但是你说你不能修改这个 HTML，对吧？

鉴于这种限制，这就是我能够解决问题的方法......
将您示例中的 HTML 放在 <span> 标记中，并为其分配一个类。我使用“test”作为我的类名”。然后将这个 CSS 放在 HTML 文档的头部：

<style language="text/css">
  /*<![CDATA[ */
  .thumbnail img {
    display: block;
  }
  .test {
    display: inline-block;
  }
  .test .price, .test .below-thumb  {
    display: block;
    text-align: center;
  }
  /* ]]> */
</style>

为什么它有效

  • 使图像显示为块的选择器解决了缺少 <br /> 标签的问题。
  • 用于包围 HTML 的 span 标签显示为内联块。这意味着它将围绕其内容折叠，为您提供一个可以使文本居中的框。
  • 使包含文本的项目显示为块会导致它们占用 100% 的宽度，填充周围的框
  • 包含“text-align：center”最终使文本在其容器中居中显示
于 2013-02-13T20:11:31.433 回答
0

我只是把它放在一个 div 中，然后将它浮动到另一个 div 旁边，里面什么都没有。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

就像此链接中的第 8 步一样。

于 2013-02-13T19:48:05.920 回答