中间对齐中心2浮动

时间:2016-01-13 03:40:44

标签: html css alignment

http://www.capitalregionceremonies.net/

在首页的底部,我想将婚纱奖励块放在其他2个徽章的中央,但我似乎无法找到方法。任何帮助,将不胜感激!感谢。

2 个答案:

答案 0 :(得分:1)

您的标记似乎有点奇怪,我不确定您是否在CMS或源文件中输入代码。无论如何,您应该能够通过下面的这种代码结构获得所需的布局。

如果您不熟悉CSS,并且不知道如何添加第一个代码块,可以在Appearance>中进行编辑。自定义> WordPress中的CSS(reference),或者您可以将它们内联添加到您的元素中(不推荐,但根据您的能力可能更容易)。

.column-left {
  float: left;
  width: 33%;
}
.column-right {
  float: right;
  text-align: right;
  width: 33%;
}
.column-center {
  display: inline-block;
  text-align: center;
  width: 33%;
}
<div class="column-left">
  <a href="http://www.theknot.com/marketplace/reverend-ronald-hunt-capital-region-ceremonies-rotterdam-ny-550208?utm_source=vendor_website&amp;utm_medium=banner&amp;utm_term=6d82f360-5321-42a9-bd35-a16c012a8cd4&amp;utm_campaign=vendor_badge_assets">
    <img src="http://www.capitalregionceremonies.net/wp-content/uploads/2016/01/ASI_2-e1452633825381.png" alt="As Seen in The Knot Magazine" width="75" height="150" border="0">
  </a>
</div>

<div class="column-center">
  <div class="ww-bca-2014 ww-reset">
    <a class="ww-bca-top" title="Weddings, Wedding Venues" href="http://www.weddingwire.com">
      <br>
    </a>
    <a class="ww-bca-top" href="http://www.weddingwire.com">
      <img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-top.png" alt="Weddings, Wedding Venues" width="124" height="33">
    </a>
    <a class="ww-bca-bottom" title="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html">
      <br>
    </a>
    <a class="ww-bca-bottom" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html">
      <img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-bottom.png" alt="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" width="124" height="92">
    </a>
    <p></p>
    <div class="ww-clear"></div>
  </div>
</div>

<div class="column-right">
  <a href="http://www.celebrantinstitute.org" target="_blank">
    <img src="http://www.celebrantinstitute.org/logo/life-cycleLogo-5-2010.gif" alt="Celebrant USA Foundation and Institute" border="0">
  </a>
</div>

答案 1 :(得分:0)

我没有在所有浏览器中测试它,但是应该这样做。只需将您尝试排列的元素包装在div

<div>

  <div style="float: left">
    <a style="" href="http://www.theknot.com/marketplace/reverend-ronald-hunt-capital-region-ceremonies-rotterdam-ny-550208?utm_source=vendor_website&amp;utm_medium=banner&amp;utm_term=6d82f360-5321-42a9-bd35-a16c012a8cd4&amp;utm_campaign=vendor_badge_assets"><img src="http://www.capitalregionceremonies.net/wp-content/uploads/2016/01/ASI_2-e1452633825381.png" alt="As Seen in The Knot Magazine" width="75" height="150" border="0"></a>
  </div>

    <div style="float: right;">
    <a href="http://www.celebrantinstitute.org" target="_blank"><img src="http://www.celebrantinstitute.org/logo/life-cycleLogo-5-2010.gif" alt="Celebrant USA Foundation and Institute" border="0"></a>
</div>

<div class="ww-bca-2014" style="">
  <a class="ww-bca-top" title="Weddings, Wedding Venues" href="http://www.weddingwire.com"><br>
</a>
  <a class="ww-bca-top" href="http://www.weddingwire.com"><img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-top.png" alt="Weddings, Wedding Venues" width="124" height="33"></a><a class="ww-bca-bottom" title="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html"><br>
</a>

  <a class="ww-bca-bottom" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html"><img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-bottom.png" alt="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" width="124" height="92"></a>
  <p></p>
</div>

</div>