Question

我有2个元素，一个标题和一张卡片中包含的图标。

标题水平居中对齐，图标水平右对齐。

但现在我想在中间垂直对齐两个项目。

<div class='card center-align'>
  <span class='card-title'>Title</span>
  <i class='material-icons right'>delete</i>
</div>

.card {
  width: 500px;
  height: 100px;
  vertical-align: middle;
}

在这里演示：https://jsfiddle.net/mn3Ldyc7/4/

一直在尝试不同的方法，但仍然无法完美地对齐。任何帮助非常感谢!!

Answer 1

将.card提交给.card { width: 500px; height: 100px; vertical-align: middle; display: table-cell; } .card .card-title { line-height: 30px; } i.right { line-height: 30px; }课程。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/1e005331dc.js"></script>

<div class='card center-align'>
  <span class='card-title'>Title</span>
  <i class='material-icons right'>delete</i>
</div>

Route::get('student-search', 'Students@search')

Answer 2

另一种使用flex的解决方案：

.card {
  width: 500px;
  height: 100px;
  display: flex;
  align-items: center;
}

.card-title {
  flex: 1
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/1e005331dc.js"></script>
<div class='card center-align'>
  <span class='card-title'>Title</span>
  <i class='material-icons right'>delete</i>
</div>

Answer 3

只需将line-height应用于您的范围和图标。

＆＃13;

.card {
  width: 500px;
  height: 100px;
}

.card > span.card-title, i.right{
  line-height: 90px;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/1e005331dc.js"></script>

<div class='card center-align'>
  <span class='card-title'>Title</span>
  <i class='material-icons right'>delete</i>
</div>

＆＃13;

Answer 4

最简单的解决方案是为.card div中的项目提供与div相同大小的行高。

＆＃13;

.card {
  width: 500px;
  height: 100px;
  vertical-align: middle;
}

.card * {
  line-height: 100px !important;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/1e005331dc.js"></script>

<div class='card center-align'>
  <span class='card-title'>Title</span>
  <i class='material-icons right'>delete</i>
</div>

＆＃13;

请注意，我必须包含!important，这不是选择，但该片段会将googleapis链接放入我自己的CSS之后。

Answer 5

这里有多种可能的答案，让我们选择快速的答案;

.card {
    width: 500px;
    height: 100px;
    line-height: 100px;
}

<强>可是...

...缺点是，如果您的文字超出卡片中的一行，则您的布局会中断。更好的解决方案，使用flexbox：

＆＃13;

.card {
  width: 500px;
  min-height: 100px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}

.card-title {
  -webkit-box-flex: 1;
          flex: 1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div class='card center-align'>
  <span class='card-title'>Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus</span>
  <i class='material-icons right'>delete</i>
</div>

＆＃13;

Answer 6

也许这可以帮到你。

https://jsfiddle.net/devefrontend/mn3Ldyc7/7/

npm install d3-ng2-service --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { D3Service } from 'd3-ng2-service'; // <-- import statement

@NgModule({
  declarations: [
    AppComponent,
    TestD3Component // <-- declaration of the D3 Test component used below
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule
  ],
  providers: [D3Service], // <-- provider registration
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

<div class="ds-table">
  <div class="ds-table-cell">
   <span class='card-title'>Title</span>
   <i class='material-icons right'>delete</i>
  </div>
</div>

.card {
  width: 500px;
  height: 100px;
}
.ds-table {
  display:table;
  text-align:center;
  width:100%;
  height:100%;
}
.ds-table-cell {
  display:table-cell;
  vertical-align:middle;
}

如何在此场景中垂直对齐2个元素？

6 个答案: