Question

我有以下代码，我想在中间对齐标题和类别div：

＆＃13;

.grid-item-info {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
    opacity: 0;
    color: #333333;
}
.grid-item:hover .grid-item-info {
    background: rgba(255,255,255,.6);
    opacity: 1;
    -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.grid-item .title,
.grid-item .category {
    width: 46%;
    float: left;
}
.grid-item .title {
    text-align: right;
    padding-right: 2%;
    border-right: 1px solid #333333;
    @include heading(16px,400);
}
.grid-item .category {
    text-align: left;
    margin-left: 2%;
    @include heading(16px,300);
}

＆＃13;

    <div class="grid-item">
    	<div class="col-md-4">
    		<div class="grid-item-info">
    			<div class="title">
    				Title
    			</div><!-- end .title -->
    			<div class="category">
    				Category
    			</div><!-- end .category -->
    		</div><!-- end. grid-item-info -->
    		<img src="img...">
    	</div><!-- end .col-md-4 -->
    </div><!-- end .grid-item -->

＆＃13;

我想要做的是在grid-item-info div中垂直对齐标题和类别div。我该如何完成这项工作？

Answer 1

这是我一直在使用的方法。

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
position: relative;

申请.title和.category

Answer 2

您可以使用＆＃39; display：table＆＃39;实现垂直对齐。

我在这里编辑了您的代码＆gt; https://jsfiddle.net/q5o9ubxn/

您可以做的是，将父div显示为＆＃39; table＆＃39;然后在显示的表格单元格内放置一个子div。并将对齐设置为中间。

.styleTable {
    display: table; 
    height: 100%; 
    overflow: hidden;
}

.styleCell {
    display: table-cell; 
    vertical-align: middle;
}

<div class="grid-item">
    <div class="col-md-4">
        <div class="grid-item-info styleTable">
            <div class="styleCell">
                <div class="title">
                    Title
                </div><!-- end .title -->
                <div class="category">
                    Category
                </div><!-- end .category -->
            </div>
        </div><!-- end. grid-item-info -->
        <img src="img..." />
    </div><!-- end .col-md-4 -->
</div><!-- end .grid-item -->

Answer 3

垂直居中通常是HTML的挑战。我发现的最好的方法之一是使用CSS vertical-align:center;

如果您在.grid-item-info div内添加100％高度的div并删除float，我们就可以完成您正在寻找的内容：

<div class="grid-item">
  <div class="col-md-4">
    <div class="grid-item-info">
      <div class="title">
        Title
      </div><!-- end .title -->
      <div class="category">
        Category
      </div><!-- end .category -->
      <div class="vcenter"></div><!-- end .vcenter -->
    </div><!-- end. grid-item-info -->
    <img src="img...">
  </div><!-- end .col-md-4 -->
</div><!-- end .grid-item -->

.grid-item .title,
  .grid-item .category {
  width: 46%;
  display:inline-block;
  vertical-align:center;
}
.grid-item .vcenter {
  vertical-align:middle;
  display:inline-block;
  height:100%;
}

这是一个演示的小提琴：https://jsfiddle.net/n2y8wpwt/

我如何在父母的中间垂直对齐这两个div？

3 个答案: