Question

我有一张图片，希望旁边的文字垂直居中。我可以使用文本中心，如果它的水平对齐，但我需要垂直对齐。我怎样才能做到这一点？在bootstrap中有没有办法做到这一点？

mQueuedCallsRepository.getAll()
    .flatMap(new Func1<QueuedCallModel[], Observable<QueuedCallModel[]>>() {
        @Override
        public Observable<QueuedCallModel[]> call(final QueuedCallModel[] queuedCallModels) {
            return mQueuedCallsRepository.clear()
                    .doOnNext(new Action1<Void>() {
                        @Override
                        public void call(Void aVoid) {
                            disableReceiver(context);
                        }
                    })
                    .flatMap(new Func1<Void, Observable<QueuedCallModel[]>>() {
                        @Override
                        public Observable<QueuedCallModel[]> call(Void aVoid) {
                            return Observable.just(queuedCallModels);
                        }
                    });
        }
    })
    .subscribeOn(Schedulers.io());

以下是codepen

Answer 1

如何使用flexbox：

＆＃13;

Foo.on('attached', function() {
  Foo.find = function(filter, callback) {
    //Whatever you need to do here...
    callback(null, {hello: 'hello'});
  }
});

＆＃13;

.well {
  display: flex;
  align-items: center;
}

＆＃13;

Answer 2

<html><head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
<div class="row">
<div class="col-3">
    <img src="https://media.haircutinspiration.com/photos/20181204011855/boy-hairstyle-e1536810585307.jpg" class="img-fluid">
</div>
    <div class="col-3 align-self-center">
        hello hello
    </div>
 
</div>
  </body>

Answer 3

您应该从＆＃34; col-md-3＆＃34;修改css类。到＆＃34; col-md-9＆＃34;。然后你把它作为中心，因为你使用了大容器＆＃34; col-md-12＆＃34;

并添加

 "text-align: center"

使用引导程序基于图像垂直对齐文本

3 个答案: