我該如何對齊 <input> 有了這個 <h3> 和圖像？

Question

有些方法使我無法使輸入/標簽與h1對齊，輸入/ alin用盡了col中的所有空間，就好像它是col-lg-12一樣，somereason的輸入在所有內容的中間對齊，如圖所示。圖片

有人對此有解決方案嗎？

顯示輸入在頁面中間對齊的示例

---------------- HTML ------------

<div class="col-lg-12 Info hs1b">
        <div class="col-lg-2">
        <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
        <label for="cmn-toggle-1"></label>
        </div>
        <div class="col-lg-10">
        <h1 class="vid-hl">Testing</h1>
        </div>
    </div>

--------------------- CSS -------------------

.Info{
    text-align:center !important;
    color:#ffffff;
    margin: 0 auto !important;
}

.hs1b{
    background-color:transparent;
    color:#1f1f1f !important;
    margin:0 !important;
    padding:0 !important;
    border-bottom:2px solid black;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
  list-style-type: none !important;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  float:none;
}

input.cmn-toggle-round + label {
  width: 60px;
  height: 30px;
  background-color: #fff;
  border:1px solid #fff;
  border-radius: 20px;
  list-style-type: none;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #007E0A;
  border-radius: 20px;
  transition: background 0.4s;
    font-family: 'Passion One', cursive;
  content:"ON";
  padding-top:3px;
  padding-left:20px;
}
input.cmn-toggle-round + label:after {
  width: 29px;
  left:-1.5px;
  background-color: #fff;
  border-radius: 55%;
  transition: margin 0.5s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #FF0004;
  content:"OFF";
  float:left;
  display:block;
  padding-top:3px;
  text-align:left;
  padding-left:4px;
  padding-right:2px !important;
  overflow:hidden !important;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 31.5px;
}

.vid-hl{
    color:#ffffff;
    font-weight: bold !important;
    font-family: 'Passion One', cursive;
    font-size:55px;
    display:block;
    float:none;
    margin-top:5px !important;
    height:auto !important;
}

@media only screen and (max-width : 490px) { 
.vid-hl{
    color:#ffffff;
    font-weight: bold !important;
    font-family: 'Passion One', cursive;
    font-size:40px;
    border-bottom:2px solid black;
    margin-top:5px !important;
    margin:0 auto;
    height:auto !important;
}
}

Answer 1

Try This One

 .Info{ text-align:center !important; color:#ffffff; margin: 0 auto !important; } .hs1b { background: tan none repeat scroll 0 0; border-bottom: 2px solid black; color: #1f1f1f !important; float: left; margin: 0 !important; padding: 0 !important; width: 100%; } .col-lg-2 { display: inline-block; } .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; list-style-type: none !important; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; float:none; } input.cmn-toggle-round + label { width: 60px; height: 30px; background-color: #fff; border:1px solid #fff; border-radius: 20px; list-style-type: none; } input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round + label:before { right: 1px; background-color: #007E0A; border-radius: 20px; transition: background 0.4s; font-family: 'Passion One', cursive; content:"ON"; padding-top:3px; padding-left:20px; } input.cmn-toggle-round + label:after { width: 29px; left:-1.5px; background-color: #fff; border-radius: 55%; transition: margin 0.5s; } input.cmn-toggle-round:checked + label:before { background-color: #FF0004; content:"OFF"; float:left; display:block; padding-top:3px; text-align:left; padding-left:4px; padding-right:2px !important; overflow:hidden !important; } input.cmn-toggle-round:checked + label:after { margin-left: 31.5px; } .vid-hl{ color:#ffffff; font-weight: bold !important; font-family: 'Passion One', cursive; font-size:55px; display:block; float:none; margin-top:5px !important; height:auto !important; } @media only screen and (max-width : 490px) { .vid-hl{ color:#ffffff; font-weight: bold !important; font-family: 'Passion One', cursive; font-size:40px; border-bottom:2px solid black; margin-top:5px !important; margin:0 auto; height:auto !important; } } 

 <div class="col-lg-12 Info hs1b"> <div class="col-lg-2"> <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-1"></label> </div> <div class="col-lg-10"> <h1 class="vid-hl">Testing</h1> </div> </div>