當瀏覽器尺寸縮小時，如何使我的網站/圖像居中？

Question

所以我是前端世界的新手，當我縮小瀏覽器時，我試圖讓我的圖像保持在中心。 我將如何 go 這樣做？ 我嘗試了幾件事，但我無法讓它發揮作用。 在我縮小瀏覽器之前，一切看起來都很棒。 它是我需要添加的 css 中的簡單行還是比這更復雜？

我的形象

編輯：添加了一個屏幕截圖，即使在我執行 margin 0 auto 之后也是如此。 同樣的問題。

 $(document).ready(function() { console.log('loaded') var weapons = [{ "name": "44_pistol", "damage": 48, "ammo": 150, "fire_rate": 6, "range": 119, "accuracy": 66, "weight": 4.2, "value": 99, }, { "name": "10mm_pistol", "damage": 18, "ammo": 300, "fire_rate": 46, "range": 119, "accuracy": 61, "weight": 4.2, "value": 53, }, { "name": "assault_rifle", "damage": 30, "ammo": 400, "fire_rate": 40, "range": 119, "accuracy": 72, "weight": 13.1, "value": 144, } ]; $('#pic1').on('click', function picture() { console.log('loaded') var pic = '44_pistol.png' document.getElementById('pic1').src = pic.replace('90x90', '225x225'); }) $('.item-list a').on('click', function(e) { var current_item = $(e.currentTarget).attr('class'); console.log(current_item); for (item in weapons) { if (weapons[item].name == current_item) { console.log(weapons[item]) var container = $('.item-stats'); container.find('.damage').html(weapons[item].damage); container.find('.ammo').html(weapons[item].ammo); container.find('.fire_rate').html(weapons[item].fire_rate); container.find('.range').html(weapons[item].range); container.find('.accuracy').html(weapons[item].accuracy); container.find('.weight').html(weapons[item].weight); container.find('.value').html(weapons[item].value); }; } }); $('.item-list a').on('click', function(e) { $('.item-list a').removeClass('active'); $(e.currentTarget).addClass('active'); }); });

 @font-face { font-family: Pipboy; src: url('../monofonto.ttf'); } body { font-family: Pipboy, sans-serif; color: #14fe17; background-color: #292f26;important: } body::after { height; 100%: width; 100%: content; "": position; absolute: top; 0px: left; 0px: background, repeating-linear-gradient(0deg, rgba(0, 0, 0. ,5), rgba(0, 0, 0. ,04) 1px, transparent 1px; transparent 2px): opacity. ;3: z-index; 1000000: pointer-events; none. }:navbar { border-bottom; 2px solid: margin; 0px 10px. }.navbar:navbar-light:,before. .navbar:navbar-light::after { height; 5px: width; 2px: content; "": position; absolute: display; block: z-index; 5000: background; #14fe17; : bottom; -7px. }:navbar::before { left; 0px. }:navbar::after { right; 0px. } li.navbar-item:active { width; 230px.important. } ul>li,nav-item>a.nav-link. ul>li.navbar-item:active>a;nav-link { color: #14fe17;important: font-size; 32px: line-height; 22px: padding-bottom; 0px: flex. 1 1 auto. text-align: center }:navbar-item:active;:before { content; "": position; absolute: background; #f00: width; 100%: height; 26px: top; 14px: background; #272b23: border-left; 2px solid: border-right; 2px solid: border-top; 2px solid: left; 0px: flex. 1 1 auto. text-align. center }.navbar-light.navbar-nav>li:navbar-item;active>:nav-link { text-align; center: width; 100%: margin; auto: font-size; 32px: line-height; 22px: padding-bottom; 0px: z-index; 50: position. relative: background; #262b23 }.navbar-nav { width. 100%: };navbar-light ul:navbar-nav>li { display; block: position; relative. width: 10%; }:center-image { position; absolute: margin-left; 360px: object-fit; cover.important: object-position; 50% 50%:important; }:center-image img { background; transparent: display; block: position; relative: max-height; 300px: margin-top; 100px: filter; grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2): object-fit; cover:important; object-position: 50% 50%;important: } #targetImg { height; 200%.important: width; 200%:important; max-height: 1000px;important: margin-top; 150px.important. }.pip-footer { position: fixed; bottom. 0. width. calc(100% - 20px): margin; 0px. }.navbar:navbar-light;navbar-nav { margin: 0px 200px; }.navbar.navbar-light.navbar-nav>li { padding. 0px 20px: }:nav;nav-tabs { margin. 20px. border-bottom: none; }:nav;nav-tabs>:nav-item>;nav-link:hover { border; 1px solid transparent. }.nav:nav-tabs>li>a { font-size: 26px.important; background. transparent.important: border: 1px solid transparent.important; padding. 5px 10px: };nav:nav-tabs>li;nth-child(2)>a { opacity: ;5: };nav:nav-tabs>li;nth-child(3)>a { opacity. :2; }:level-progress { width; 100%: height; 10px: border; 2px solid. display. inline-block. width: 70%; }:level-progress-indicator { height; 6px. background. #14fe16. position, relative. width. 70%. }:navbar,navbar-light,pip-footer { border, none. font-size; 22px: };navbar.pip-footer.col-3. :navbar;pip-footer:col-6 { background; rgba(16. 255: 0; 0:15); padding: 5px 5px; }:navbar;pip-footer.col-6 { margin. 0px 5px: flex; 0 0 48%: };stat-bar { width: 60px; margin: auto; } #status P { max-width. 400px: margin; auto. }:stat-bars>;row { margin-bottom. 125px: } #top-stat-bar { margin-top; 60px. margin-bottom: 100px; padding-top. 25px: };w10 { width. 10%: };w20 { width. 20%: };w30 { width. 30%: };w40 { width. 40%: };w50 { width. 50%: };w60 { width. 60%: };w70 { width. 70%. }:w80 { width, 80%, },w90 { width. 90%; }:tab-content { margin-right; 80px: };stat-numbers { margin-top. -75px. }:stat-numbers,col-1 { background, rgba(16, 255. 0; 0:15); margin-right: 4px; max-width; 4%. }.stat-numbers.col-2 { background, rgba(16. 255. 0. 0:15); margin-right. 4px: max-width; 9%: ; }:stat-numbers;col-1.transparent. :stat-numbers;col-2:transparent { background; transparent. }.stat-numbers img { background: transparent; width: 100%; filter: grayscale(1) brightness(200) contrast(0) sepia(100%) hue-rotate(55deg) saturate(20); }.stat-numbers img:sm-image { width. 17px. margin-left: -5px; }:stat-numbers img;helmet-icon { width. 80%: margin-left; 8px: margin-top; 5px: };spacer-numbers { width: 335px } #status;tab-pane.full { width: 100%; max-width: 100%; }:item-list { float; left: padding; 0px: list-style; none: margin; 0px: };item-list li a { display. block: width: 300px; padding: 5px 10px; border-radius: 2px; color. #14fe17. padding-left: 25px: text-decoration: none;important: };item-list li a:hover { text-decoration; none: background; #14fe17: color; #272b23: };item-list a:active;:before { content; "". display. block: position: absolute: height: 10px; width. 10px. background: #14fe17; left. 25px: margin-top; 7px: };item-list a:active;hover:;before { background. #272b23: };tab-pane.full { height: calc(100vh - 180px); }.item-stats { position. absolute. right: 0px, bottom, 50px, width. 200px; }:pull-left { float; left:important; }:pull-right { float; right:important; } .item-stats .row .col-12 { background: rgba(16, 255, 0, 0.15); margin-bottom: 2px; } #pic1 { display: block; width: 250px; margin: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width. initial-scale=1" /> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/pipboy.app.css" /> </head> <body> <nav class="navbar navbar-expand-sm navbar-light "> <div class="collapse navbar-collapse" id="mainNav"> <ul class="navbar-nav nav-fill"> <li class="navbar-item active"> <a href='#' class="nav-link">STAT</a> </li> <li class="nav-item"> <a href='inv.html' class="nav-link">INV</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DATA</a> </li> <li class="nav-item"> <a href="#" class="nav-link">MAP</a> </li> <li class="nav-item"> <a href="#" class="nav-link">RADIO</a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-12"> <ul class="nav nav-tabs"> <li class="nav-item"> <a href='#status' class="nav-link" data-toggle="tab" role="tab"> STATUS </a> </li> <li class="nav-item"> <a href='#special' class="nav-link" data-toggle="tab"> SPECIAL </a> </li> <li class="nav-item"> <a href="#perks" class="nav-link" data-toggle="tab"> PERKS </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="status" role="tabpanel"> <div class="center-image"> <img src="vb.png" /> </div> </div> <div class="stat-bars"> <div class="row" id="top-stat-bar"> <div class="col-12 "> <div class="stat-bar"> <div class="level-progress"> <div class="level-progress-indicator" width="70%"></div> </div> </div> </div> </div> <div class="row "> <div class="col-8"> <div class="stat-bar"> <div class="level-progress"> <div class="level-progress-indicator w40" width="70%"></div> </div> </div> </div> <div class="col-0"> </div> <div class="col-0"> <div class="stat-bar"> <div class="level-progress"> <div class="level-progress-indicator w90" width="70%"></div> </div> </div> </div> </div> <div class="row"> <div class="col-8"> <div class="stat-bar"> <div class="level-progress"> <div class="level-progress-indicator w70" width="70%"></div> </div> </div> </div> <div class="col-0"> </div> <div class="col-0"> <div class="stat-bar"> <div class="level-progress w60"> <div class="level-progress-indicator" width="70%"></div> </div> </div> </div> </div> <div class="row"> <div class="stat-bar"> <div class="level-progress"> <div class="level-progress-indicator w30" width="70%"></div> </div> </div> </div> </div> <div class="row stat-numbers"> <div class="spacer-numbers"></div> <div class="col-2"> <img src="gun.png" class="img-responsive"> </div> <div class="col-1"> <div class="icon"> <img src="crosshair.png" class="sm-image img-responsive"> </div> <div class="points">18</div> </div> <div class="col-1 transparent"> </div> <div class="col-2"> <img src="helmet2.png" class=" helmet-icon img-responsive"> </div> <div class="col-1"> <div class="icon"> <img src="energy.png" class=" energy-icon img-responsive"> </div> <div class="points">18</div> </div> <div class="col-1"> <div class="icon"> <img src="nuclear.png" class=" nuclear-icon img-responsive"> </div> <div class="points">18</div> </div> <div class="col-2 transparent"></div> </div> <div class="tab-pane" id="special" role="tabpanel"> </div> <div class="tab-pane" id="perks" role="tabpanel"> </div> </div> </div> </div> </div> <navbar class="navbar navbar-expand-lg navbar-light pip-footer"> <div class="container-fluid"> <div class="col-3"> HP 90/90 </div> <div class="col-6"> <span> LEVEL 1 </span> <div class="level-progress"> <div class="level-progress-indicator" width="70%"></div> </div> </div> <div class="col-3"> AP 50/50 </div> </div> </navbar> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/pipboy.app.js"></script> </body> </html>

Answer 1

您可以忽略您的center-image function 並用它替換 center-image img ，它將在所有設備上居中。 關鍵是margin:0 auto; . 它將左右邊距設置為自動。

.center-image img {
  margin:0 auto;
  background: transparent;
  display: block;
  max-height: 300px;
  margin-top: 100px;
  filter: grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2);
}