Question

有没有一种可以使我的Angular组件垂直对齐的简单方法？

我将basket: { 32012: { title: "foo", count: 1 }, 32013: { title: "bar", count: 1 } }用于主容器。

clock.component.html

basket: {
    32012: {
        title: "foo",
        count: 4
    },
    32013: {
        title: "bar",
        count: 5
    }
}

clock.component.css

import {combineReducers} from 'redux';
import {persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import basketReducer from '../ducks/basket/reducers';
const basketPersistConfig = {
    key: 'basket',
    storage: storage,
};
const rootReducer = combineReducers({
    basket: persistReducer(basketPersistConfig, basketReducer)
});
export default rootReducer;

app.component.html

display: grid

app.component.css

<div class="container">
  {{time | date: 'HH:mm:ss'}}
</div>

Answer 1

不知道您是否愿意使用flexbox解决方案，但这是我最近在这种情况下开始使用的方法：

.container {
    display: flex;
    align-items: center;
    height: 100%; /* make sure .containers's parents also have fixed height */
}

:host {
    display: inline-block;
    flex: 1;
}

还有一种定位方法，在您的情况下很常见：

.container {
    position: relative;
    height: 100%;
}

:host {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

在index.html中垂直对齐Angular组件-使用display：grid

1 个答案: