Question

嘿，每个人都有一些关于在容器中居中文本和div的问题。

这是我的codepen。 http://codepen.io/_Dawood/pen/ByjvqO

我的问题：

1。）将div内的任何元素（文本，图像）垂直居中的最佳方法是什么。 2.）在容器div上使用固定高度是好还是坏？

 <header>
  <div class="logo">
    logo
  </div>
  <h1 class="SiteTitle">
    Registrar's <span>Office</span>
  </h1>
  <div class="search">
    Search
  </div>
  <div class="az">
    A -> Z Index
  </div>
  <div class="sublinks">
    <a href=""> About</a>
    <p>Main Office</p>
  </div>
</header>


@import 'susy';
* { box-sizing: border-box; }
header {
  background:red;
  width:100%;
  height: 100%;
  @include container(100%);
  height:100px;



  .logo{
    @include span(3 of 12);
    border:1px solid #fff;
    height: 100%;

  }

  h1{
    @include span(5 of 12);
    border:1px solid #fff;
    height: 100%;
    font-size:40px;
  }
 .search, {
   @include span(2 of 12);
   border:1px solid #fff;
   height: 100%;
 }


  .az {
    @include span(2 of 12  last);
        border:1px solid #fff;
    height: 100%;


  }
.sublinks {
  background:blue; 
  clear:both;
  text-align:right;
  @include span(12 of 12 );
  @include break;
  a, p {
    display:inline-block
  }
}
}

Answer 1

根据我的经验，固定高度不一定是个问题。如果你有一个固定高度的容器和一个固定高度的子元素，那么你可以很容易地用css垂直居中。例如，如果您有一个100px的容器和一个50px的子容器，请将它从顶部放置25px。

使用更多动态元素，我通常使用javascript。如果你使用jQuery，你可以设置这样的函数：

function centerElement(container, child) {
     var containerHt = $(container).height();
     var childHt = $(child).height();
     var top = Math.round( (containerHt - childHt) / 2 );
     $(child).css('top', top);
}

当然，容器需要具有相对位置，并且孩子需要具有绝对位置。左边的值也可能是一个问题，在这种情况下，你可以让你的函数找到两个元素的宽度，并将它们的差异减半。

最后，还有另一种CSS解决方案有时会起作用（虽然它可能会导致其他一些问题，尤其是溢出：隐藏）：

#container { display: table; }
#child { display: table-cell; vertical-align: middle; }

在div中居中元素

1 个答案: