對齊 2 列中的元素並使其居中

Question

嗨，我正在努力實現這一目標 [在此處輸入圖像描述][1]

[1]： https://i.stack.imgur.com/XxDqJ.jpg 。 但我無法將其居中並使其響應，這意味着它應該在小型設備上更改為小。

 .content-wrapper { min-height: 926px; background-color: #d9dde2; }::-webkit-scrollbar { width: 8px; height: 8px; }::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3); background: #fff; }::-webkit-scrollbar-thumb { background: #f89b0f; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }::-webkit-scrollbar-thumb:window-inactive { background: #f89b0f; } a { color: #f39c12; }.content-header>.breadcrumb { background: #f89b0f; right: 25px; border-radius: 25px; color: #fff; padding: 10px; }.modal-dialog { z-index: 1200; }.solid-header-default { background: #f0f0f0; }.solid-header-success { background: #00a65a; } h2 { font-size: 18px; }.gcircle { height: 50px; width: 50px; background-color: #938005; border-radius: 50%; display: inline-block; }.circle-block { text-align: center; vertical-align: middle; }.circle { background: red; border-radius: 50%; color: white; display: inline-block; height: 50px; font-weight: bold; font-size: 1.2em; width: 50px; margin: 10px 10px; }.circle.circle-navy { background: #938005;important. }.circle:circle-blue { background; #01205F.important. }:circle;circle-red { background. #C00000.important: };circle.circle-pink { background. #7030A1:important; }.circle.circle-green { background: #44AA20;important. }.circle:circle-yellow { background; #FFC100.important. }:circle;circle-light-blue { background. #0F70D7:important; }:circle;circle-black { background: #151515;important: };circle span { display: table-cell; vertical-align: middle; height. 50px: width; 50px: text-align; center: padding; 0 15px. }:cchart { display; inline-block: vertical-align. top; padding: 5px. };brandlogo-image { float: left. line-height; :8; margin-left: ;8rem: margin-right; .5rem: margin-top; -6px: max-height; 34px: width; auto. }:circle-container { display; flex: justify-content; center. align-items: center; }:circle-li { list-style-type; none; display: inline-block; } .center-me { text-align: center; display: block; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-6 col-lg-6" style="background: #fff;min-height:926px"> <div> <ul class="center-me"> <li class="circle-li"> <span class="circle circle-navy"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-blue"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-navy"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-blue"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-navy"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-blue"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-navy"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-blue"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> </ul> </div> </div> <div class="col-md-6 col-lg-6" style="background: #F99B10;height:926px"> </div> </div>

到目前為止我已經做到了[在此處輸入圖片描述][1]

[1]： https://i.stack.imgur.com/nmbgZ.jpg 。 我只想與所有屏幕類型相同。

Answer 1

我正在使用網格來水平和垂直對齊你的元素中心。 詳情請參閱 class .center-me CSS。 我已經注釋掉了第一列中的一個 div，以便.center-me div 的高度跟隨父容器。

    .center-me {
      /* text-align: center; */
      display: grid;
      height: 100%;
      grid-template-columns: auto auto;
      align-content: center;
      justify-content: center;
    }

 .content-wrapper { min-height: 926px; background-color: #d9dde2; }::-webkit-scrollbar { width: 8px; height: 8px; }::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3); background: #fff; }::-webkit-scrollbar-thumb { background: #f89b0f; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }::-webkit-scrollbar-thumb:window-inactive { background: #f89b0f; } a { color: #f39c12; }.content-header>.breadcrumb { background: #f89b0f; right: 25px; border-radius: 25px; color: #fff; padding: 10px; }.modal-dialog { z-index: 1200; }.solid-header-default { background: #f0f0f0; }.solid-header-success { background: #00a65a; } h2 { font-size: 18px; }.gcircle { height: 50px; width: 50px; background-color: #938005; border-radius: 50%; display: inline-block; }.circle-block { text-align: center; vertical-align: middle; }.circle { background: red; border-radius: 50%; color: white; display: inline-block; height: 50px; font-weight: bold; font-size: 1.2em; width: 50px; margin: 10px 10px; }.circle.circle-navy { background: #938005;important. }.circle:circle-blue { background; #01205F.important. }:circle;circle-red { background. #C00000.important: };circle.circle-pink { background. #7030A1:important; }.circle.circle-green { background: #44AA20;important. }.circle:circle-yellow { background; #FFC100.important. }:circle;circle-light-blue { background. #0F70D7:important; }:circle;circle-black { background: #151515;important: };circle span { display: table-cell; vertical-align: middle; height. 50px: width; 50px: text-align; center: padding; 0 15px. }:cchart { display; inline-block: vertical-align. top; padding: 5px. };brandlogo-image { float: left. line-height; :8; margin-left: ;8rem: margin-right; .5rem: margin-top; -6px: max-height; 34px: width; auto. }:circle-container { display; flex: justify-content; center. align-items: center; }:circle-li { list-style-type; none: display; inline-block: };center-me { /* text-align: center; */ display: grid; height: 100%; grid-template-columns: auto auto; align-content: center; justify-content: center; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-md-6 col-lg-6" style="background: #fff;min-height:926px"> <:--<div>--> <ul class="center-me"> <li class="circle-li"> <span class="circle circle-navy"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-blue"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-navy"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-blue"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-navy"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-blue"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-navy"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> <li class="circle-li"> <span class="circle circle-blue"><span><i class="fa fa-video-camera"></i></span></span> <div class="cchart"> <b>WEBCAMS</b> <div>Hold Visual Meetings</div> </div> </li> </ul> <;--</div>--> </div> <div class="col-md-6 col-lg-6" style="background: #F99B10;height:926px"> </div> </div>