如何水平对齐控制按钮而不是垂直对齐 NgxImageViewer

Question

我正在使用 NgxImageViewer，我想在屏幕底部水平显示控件而不是垂直显示控件

Html

<ngx-image-viewer  [src]="images" [(index)]="imageIndex"></ngx-image-viewer>

Ts

config = {
    btnClass: 'default', // The CSS class(es) that will apply to the buttons
    zoomFactor: 0.1, // The amount that the scale will be increased by
    containerBackgroundColor: '#ccc', // The color to use for the background. This can provided in hex, or rgb(a).
    wheelZoom: true, // If true, the mouse wheel can be used to zoom in
    allowFullscreen: true, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
    allowKeyboardNavigation: false, // If true, the left / right arrow keys can be used for navigation
    btnIcons: { // The icon classes that will apply to the buttons. By default, font-awesome is used.
      zoomIn: 'fa fa-plus',
      zoomOut: 'fa fa-minus',
      rotateClockwise: 'fa fa-repeat',
      rotateCounterClockwise: 'fa fa-undo',
      next: 'fa fa-arrow-right',
      prev: 'fa fa-arrow-left',
      fullscreen: 'fa fa-arrows-alt',
    },
    btnShow: {
      zoomIn: true,
      zoomOut: true,
      rotateClockwise: true,
      rotateCounterClockwise: true,
      next: false,
      prev: false
    }

Stackbliz url

Answer 1

试试这个 CSS。希望这有效。基本上你是将所有按钮移动到底部，然后从左到右放置它们。

.img-container button.default{
    bottom: 15px;
}
.img-container > button.default:nth-of-type(2):not(#ngx-fs-btn){
    left: 45px;
}
.img-container > button.default:nth-of-type(3):not(#ngx-fs-btn){
    left: 90px;
}
.img-container > button.default:nth-of-type(4):not(#ngx-fs-btn){
    left: 135px;
}

Answer 2

尝试添加每个相同 bottom 和不同 right 或 left 的按钮，例如：

.img-container button.default{
    bottom: 15px !important;
    display: inline;
}

button.default:nth-of-type(1){
    left: 0px;
}
button.default:nth-of-type(2){
    left: 45px;
}
button.default:nth-of-type(3){
    left: 90px;
}
button.default:nth-of-type(4){
    left: 135px;
}

注意：考虑将样式放入 styles.css 文件中。工作 DEMO

如何水平对齐控制按钮而不是垂直对齐 NgxImageViewer

How to align control buttons horizontally-bottom instead of vertically-right NgxImageViewer

css

button

imageview

angular