Question

这是我的简报形式的代码。它只有一个字段用于输入电子邮件地址。我希望新闻稿在页面中心垂直对齐。目前它不在中心。如果它有帮助，div标签是“ty-footer-form-block”我希望它是这样的：http://shop.mango.com/GB/men

（它位于页面底部）

/* ==========================================================================
    Footer form block
    ========================================================================== */
    .ty-footer-form-block {
        margin: 30px 0px 20px 235px;
        color: white;
        vertical-align: centre;
    }
    .ty-footer-form-block__title {
        display: inline-block;
        padding-right: 30px;
        font-size: 22px;
        color: white;
        font-weight: normal;
    }
    .ty-footer-form-block__form {
        display: inline-block;
        margin: 0 0 10px 0 !important;
        width: 600px;
    }
    .ty-footer-form-block__form .cm-hint {
        color: #c9c9c9;
    }

.ty-footer-form-block__title {
color: #2d2d2d;
font-size: 25px;
font-weight: 600;
vertical-align: centre;
letter-spacing: 2px;
}

.ty-footer-form-block__title {
    padding-right: 25px;
}
    /* /Footer form block */



<div class="ty-footer-form-block">
    <form action="{""|fn_url}" method="post" name="subscribe_form">
        <input type="hidden" name="redirect_url" value="{$config.current_url}" />
        <input type="hidden" name="newsletter_format" value="2" />
        <h3 class="ty-footer-form-block__title">{__("stay_connected")}</h3>
        <div class="ty-footer-form-block__form ty-control-group ty-input-append">
            <label class="cm-required cm-email hidden" for="subscr_email{$block.block_id}">{__("email")}</label>
            <input type="text" name="subscribe_email" id="subscr_email{$block.block_id}" size="20" value="{__("enter_email")}" class="cm-hint ty-input-text" />
            {include file="buttons/go.tpl" but_name="newsletters.add_subscriber" alt=__("go")}
        </div>
    </form>
</div>

Answer 1

要垂直对齐某些东西，你可以使用50％50％的绝对定位，然后使用变换来抵消它：

#outer {
  /* container should have some size */
  width: 300px;
  height: 160px;
  
  /* make it a positioning context for children */
  position:relative;
  
  background: salmon;
}

#inner {
  /* here comes the trick */
  position: absolute;
  left: 50%;
  top: 50%;
  
  /* not sure how many of those are still needed */
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
        
  /* (just making it fancy) */
  padding: 10px;
  border: 1px solid white;
  color: black;
  font-family: sans-serif;
}

<div id="outer">
  <div id="inner">Hello there</div>
</div>

时事通讯表格 - 对齐中心

1 个答案: