Question

如何在视图中垂直居中2个按钮？

例如：

<div class="container">
    <div class="row">
        <div class="col-md-5">
            <h4>My List</h4>
            <div style="height:400px; overflow-y:auto">
                <ul>
                    // List of checkboxes
                </ul>
            </div>
        </div>

        <div class="col-md-2">
            <input type="button" id="btnAddField" class="btn btn-primary" value="Add" />
            <input type="button" id="btnRemoveField" class="btn btn-primary" value="Remove" />
        </div>

        <div class="col-md-5">
            <h4>Selected Fields</h4>
            // This will contain the list selected from the checkboxes.
        </div>
    </div>
</div>

我希望第2列中的按钮相对于第1列居中（在这种情况下，我的高度为400px。

Answer 1

当宽度为df <- data.frame(Values=1:1000) mydf <- data.frame(do.call(rbind,lapply(df,matrix, ncol=10))) names(mydf) <- paste0("Col", 1:10)（names(mydf) <-sprintf("Col%d", 1:10) > head(mydf,5) # Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 #1 1 101 201 301 401 501 601 701 801 901 #2 2 102 202 302 402 502 602 702 802 902 #3 3 103 203 303 403 503 603 703 803 903 #4 4 104 204 304 404 504 604 704 804 904 #5 5 105 205 305 405 505 605 705 805 905 {的断点时，您可以在row上添加将使用Flexbox的新课程和将align-items: center垂直居中的项目{3}}

> 992px

Answer 2

尝试"K14:K" & LastRow线高。希望它会有所帮助。

/// <reference path="../../typings/index.d.ts" />

describe('footer component', () => {
  beforeEach(angular.mock.module('app', ($provide: ng.auto.IProvideService) => {
    $provide.factory('fountainFooter', () => {
      return {
        templateUrl: 'app/footer.html'
      };
    });
  }));
  it('should render \'FountainJS team\'', inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
    const element = $compile('<fountain-footer></fountain-footer>')($rootScope);
    $rootScope.$digest();
    const footer = element.find('a');
    expect(footer.html().trim()).toEqual('FountainJS team');
  }));
});

Answer 3

如果你可以使用flexbox，这样的东西可以做你想要的（使用你现有的类）：

.row {
    display: flex;

    [class^="col"] {
        float: none;
        flex-shrink: 0;
        margin: auto 0;
    }
}

如何将列中的元素相对于另一列垂直居中

3 个答案: