Question

有些我怎么不能让我的输入/标签与h1对齐，输入/ alin占用了col中的所有空间，好像它是col-lg-12，某些原因的输入在一切中间对齐如图所示

有人有解决方案吗？

Example to show the input is aligned in the middle of the page

---------------- 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>

如何将<input />与此<h3>和图像对齐？

1 个答案: