將 div 中的元素垂直居中 - CSS

Question

我需要在 div 中垂直居中我的內容。 第二個 div 似乎居中，但第一個不是。 我需要將他們兩個包括他們的孩子垂直居中在 div 中。

例子：

 [type='file'] { border: 0; clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; padding: 0; position: absolute !important; white-space: nowrap; width: 1px; &:focus { +label { box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3) !important; } } } .PcYqm { box-sizing: border-box; padding-bottom: 5px; margin: 10px; background: red; } .UtilClasses_NO_MARGINS__lwdL1 { margin: 0 !important; } .gYoMm { box-sizing: border-box; } .eZmlQJ { box-sizing: border-box; padding-top: 5px; margin: 10px; background: green; } .bcHrqA { box-sizing: border-box; margin-left: 10px; margin-right: 10px; }

 <!-- Style dependencies --> <link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" /> <!-- Blueprint stylesheets --> <link href="https://unpkg.com/@blueprintjs/icons@^3.4.0/lib/css/blueprint-icons.css" rel="stylesheet" /> <link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <div class="bp3-card bp3-elevation-1 p-2"> <div class="src__Box-sc-1sbtrzs-0 PcYqm"> <div class="container"> <div class="justify-content-between row h-100"> <div class="d-flex col-4"> <div class="bp3-button-group align-items-center"><span class="bp3-popover-wrapper"><span class="bp3-popover-target"><span icon="help" tabindex="0" class="bp3-icon bp3-icon-help bp3-intent-primary"><svg data-icon="help" width="16" height="16" viewBox="0 0 16 16"> <desc>help</desc> <path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z" fill-rule="evenodd"></path> </svg></span></span> </span> <h4 class="bp3-heading UtilClasses_NO_MARGINS__lwdL1 d-flex"><span class="src__Box-sc-1sbtrzs-0 bcHrqA">Export</span><img alt="" src="/static/media/export.846774e4.svg"></h4> </div> </div> <div class="col-auto align-items-center" style=" "> <div class="src__Box-sc-1sbtrzs-0 gYoMm h-100"><input type="file" id="uploadFileExport" accept=".xlsm"><label for="uploadFileExport" class="bp3-button bp3-intent-primary"><span>Select file</span></label></div> </div> </div> </div> </div> <div class="src__Box-sc-1sbtrzs-0 eZmlQJ"> <div class="container"> <div class="justify-content-between row"> <div class="d-flex col-4"> <div class="bp3-button-group align-items-center"><span class="bp3-popover-wrapper"><span class="bp3-popover-target"><span icon="help" tabindex="0" class="bp3-icon bp3-icon-help bp3-intent-primary"><svg data-icon="help" width="16" height="16" viewBox="0 0 16 16"> <desc>help</desc> <path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z" fill-rule="evenodd"></path> </svg></span></span> </span> <h4 class="bp3-heading UtilClasses_NO_MARGINS__lwdL1 d-flex"><span class="src__Box-sc-1sbtrzs-0 bcHrqA">Submit</span><img alt="" src="/static/media/submit.0c47fc11.svg"></h4> </div> </div> <div class="col-auto"> <div class="src__Box-sc-1sbtrzs-0 gYoMm h-100"><input type="file" id="uploadFileSubmit" accept=".xlsm"><label for="uploadFileSubmit" class="bp3-button bp3-intent-primary"><span>Select file</span></label></div> </div> </div> </div> </div> </div>

請指教。 我也可以使用引導程序。

Answer 1

編輯：這里直接合並到您的 HTML 中。

 [type='file'] { border: 0; clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; padding: 0; position: absolute !important; white-space: nowrap; width: 1px; &:focus { + label { box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3) !important; } } } .PcYqm { box-sizing: border-box; padding-bottom: 5px; margin: 10px; background: red; } .UtilClasses_NO_MARGINS__lwdL1 { margin: 0 !important; } .gYoMm { box-sizing: border-box; } .eZmlQJ { box-sizing: border-box; padding-top: 5px; margin: 10px; background: green; } .bcHrqA { box-sizing: border-box; margin-left: 10px; margin-right: 10px; }

 <!-- Style dependencies --> <link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" /> <!-- Blueprint stylesheets --> <link href="https://unpkg.com/@blueprintjs/icons@^3.4.0/lib/css/blueprint-icons.css" rel="stylesheet" /> <link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <div class="bp3-card bp3-elevation-1 p-2"> <div class="src__Box-sc-1sbtrzs-0 PcYqm"> <div class="container"> <div class="justify-content-center align-items-center row p-2"> <div class="d-flex col-4"> <div class="bp3-button-group align-items-center"><span class="bp3-popover-wrapper"><span class="bp3-popover-target"><span icon="help" tabindex="0" class="bp3-icon bp3-icon-help bp3-intent-primary"><svg data-icon="help" width="16" height="16" viewBox="0 0 16 16"> <desc>help</desc> <path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z" fill-rule="evenodd"></path> </svg></span></span></span> <h4 class="bp3-heading UtilClasses_NO_MARGINS__lwdL1 d-flex"><span class="src__Box-sc-1sbtrzs-0 bcHrqA">Export</span><img alt="" src="/static/media/export.846774e4.svg"></h4> </div> </div> <div class="col-auto align-items-center" style=" "> <div class="src__Box-sc-1sbtrzs-0 gYoMm h-100"><input type="file" id="uploadFileExport" accept=".xlsm"><label for="uploadFileExport" class="bp3-button bp3-intent-primary"><span>Select file</span></label></div> </div> </div> </div> </div> <div class="src__Box-sc-1sbtrzs-0 eZmlQJ"> <div class="container"> <div class="justify-content-center align-items-center row p-2"> <div class="d-flex col-4"> <div class="bp3-button-group align-items-center"><span class="bp3-popover-wrapper"><span class="bp3-popover-target"><span icon="help" tabindex="0" class="bp3-icon bp3-icon-help bp3-intent-primary"><svg data-icon="help" width="16" height="16" viewBox="0 0 16 16"> <desc>help</desc> <path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z" fill-rule="evenodd"></path> </svg></span></span></span> <h4 class="bp3-heading UtilClasses_NO_MARGINS__lwdL1 d-flex"><span class="src__Box-sc-1sbtrzs-0 bcHrqA">Submit</span><img alt="" src="/static/media/submit.0c47fc11.svg"></h4> </div> </div> <div class="col-auto"> <div class="src__Box-sc-1sbtrzs-0 gYoMm h-100"><input type="file" id="uploadFileSubmit" accept=".xlsm"><label for="uploadFileSubmit" class="bp3-button bp3-intent-primary"><span>Select file</span></label></div> </div> </div> </div> </div> </div>

以前的職位：

 .container { background-color: #2196f3; } .container > .wrapper { padding: 3rem 0; } /* optional */ span { display: block; }

 <div class="container"> <div class="wrapper"> <span class="item-1"> Item 1 </span> <span class="item-2"> Item 2 </span> </div> </div>

順便說一句，垂直居中的方法有上千種，您可以使用flex-box ，或者混合使用position: absolute 、 top: 50%和transform: translateY(-50%) ，都可以。

Answer 2

在您的 css 文件中，進行以下更改：

.PcYqm {
  box-sizing: border-box;
  padding-bottom: 5px;
  padding-top: 5px; // added this
  margin: 10px;
  background: red;
}

.eZmlQJ {
  box-sizing: border-box;
  padding-top: 5px;
  padding-bottom: 5px; // added this
  margin: 10px;
  background: green;
}

接下來在“選擇文件”的 HTML 標簽中，添加以下 CSS：

<label for="uploadFileExport" style="margin-top: .5rem" ... 
<label for="uploadFileSubmit" style="margin-top: .5rem" ... 

除了這個內聯 CSS，您還可以創建一個類，但這可能不起作用，因為標簽是從 Bootstrap 標簽繼承 CSS。