CSS按钮未正确对齐

时间：2018-06-26 04:33:50

标签： html css

我通过编辑“文森特·杜兰德的简单悬停效果”来完成此按钮。但是问题是我博客中的某些CSS重叠了。因此它没有正确地对准中间位置。我找不到它可能是哪一个。我尝试在某些地方使用！important标记。但是我想那没有成功。我需要知道在该代码中的哪里应该使用！important将按钮对齐到中间？还是我需要一个新的CSS元素来做到这一点？

<!-- Awesome button css Start -->
.btn-margin {
  margin-top: 1.6rem;
  box-sizing: inherit;
  text-align: center;
}

.btn {
  -webkit-tap-high!importantr: transparent;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
  box-sizing: inherit;
  color: white !important;
  cursor: pointer;
  display: inline-block;
  height: auto;
  letter-spacing: 0.5px;
  line-height: 42px;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  vertical-align: middle;
  font-size: 1.6em;
  padding: 0 2em;
  transition: 800ms ease all;
}
.btn-green {
  background-color: #1AAB8A;
}

.btn-green:hover {
  background-color: #fff;
  color: #1AAB8A !important;
}

.btn:before,.btn:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  transition: 400ms ease all;
}

.btn:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
  width: 100%;
  transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
    <a class="btn btn-green" href="#">
        Click Here To See Answers
      </a>
</div>

4 个答案:

答案 0 :(得分：1)

将<div *ngIf="field.xtype==='multiselect'" [hidden]="field.hide"> <ion-item style="margin-left:0px;padding-left:0px;padding-right:0px;"> <ion-label style="margin-bottom:10px; font-size:15px;" color="basic" stacked>{{field.label}}</ion-label> <ion-select [(ngModel)]='field.value' multiple="true" name="field.name" (ionChange)=getSublistdetails(field.name,field.value)> <ion-option *ngFor="let option of field.options">{{option.text}}</ion-option> </ion-select> </ion-item> </div> 添加到ursss 

*{box-sizing:border-box;}
<!-- Awesome button css Start -->
*{box-sizing:border-box;}

.btn-margin {
  margin-top: 1.6rem;
  box-sizing: inherit;
  text-align: center;
}

.btn {
  -webkit-tap-high!importantr: transparent;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
  box-sizing: inherit;
  color: white !important;
  cursor: pointer;
  display: inline-block;
  height: auto;
  letter-spacing: 0.5px;
  line-height: 42px;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  vertical-align: middle;
  font-size: 1.6em;
  padding: 0 2em;
  transition: 800ms ease all;
}
.btn-green {
  background-color: #1AAB8A;
}

.btn-green:hover {
  background-color: #fff;
  color: #1AAB8A !important;
}

.btn:before,.btn:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  transition: 400ms ease all;
}

.btn:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
  width: 100%;
  transition: 800ms ease all;
}
<!-- Awesome button css End -->

答案 1 :(得分：0)

使用此CSS使按钮居中对齐

<html>
    <head>
    <script src="practice2.js"></script>
        <title>Practice</title>
    </head>

    <body>
        <h1>Title</h1>
        <p>sample paragraph</p>

        <ul>
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>

        <input type="submit"  value="Call Function" onclick="myFunction()"/>
    </body>
</html>

.btn-green {
  background-color: #1AAB8A;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

<!-- Awesome button css Start -->.btn-margin {
  margin-top: 1.6rem;
  box-sizing: inherit;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.btn {
  -webkit-tap-high!importantr: transparent;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
  box-sizing: inherit;
  color: white !important;
  cursor: pointer;
  display: inline-block;
  height: auto;
  letter-spacing: 0.5px;
  line-height: 42px;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  vertical-align: middle;
  font-size: 1.6em;
  padding: 0 2em;
  transition: 800ms ease all;
}

.btn-green {
  background-color: #1AAB8A;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.btn-green:hover {
  background-color: #fff;
  color: #1AAB8A !important;
}

.btn:before,
.btn:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  transition: 400ms ease all;
}

.btn:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn-green:before,
.btn-green:after {
  background: #1AAB8A;
}

.btn:hover:before,
.btn:hover:after {
  width: 100%;
  transition: 800ms ease all;
}

<!-- Awesome button css End -->.btn-green {}

答案 2 :(得分：0)

add one parent div and set this div  text-align: center;


<!-- Awesome button css Start -->
.demo{
text-align: center;
}

.btn-margin {
  margin-top: 1.6rem;
  box-sizing: inherit;
  text-align: center;
}

.btn {
  -webkit-tap-high!importantr: transparent;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
  box-sizing: inherit;
  color: white !important;
  cursor: pointer;
  display: inline-block;
  height: auto;
  letter-spacing: 0.5px;
  line-height: 42px;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  vertical-align: middle;
  font-size: 1.6em;
  padding: 0 2em;
  transition: 800ms ease all;
}
.btn-green {
  background-color: #1AAB8A;
}

.btn-green:hover {
  background-color: #fff;
  color: #1AAB8A !important;
}

.btn:before,.btn:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  transition: 400ms ease all;
}

.btn:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
  width: 100%;
  transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="Demo">
<div class="btn-margin">
    <a class="btn btn-green" href="#">
        Click Here To See Answers
      </a>
</div>
</div>

答案 3 :(得分：0)

最后，问题出在评论：（

我在CSS中使用了html注释。这就是为什么发生这种情况。感谢@CharuMaheshwari提到这一点。另外还要感谢其他3个答案。他们都工作了。

在@CharuMaheshwari的帮助下，这是我决定使用的代码。

/* Awesome button css Start */
.btn-margin {
  margin-top: 1.6rem;
  box-sizing: inherit;
  text-align: center;
}

.btn {
  -webkit-tap-high!importantr: transparent;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
  box-sizing: inherit;
  color: white !important;
  cursor: pointer;
  display: inline-block;
  height: auto;
  letter-spacing: 0.5px;
  line-height: 42px;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  vertical-align: middle;
  font-size: 1.6em;
  padding: 0 2em;
  transition: 800ms ease all;
}
.btn-green {
  background-color: #1AAB8A;
}

.btn-green:hover {
  background-color: #fff;
  color: #1AAB8A !important;
}

.btn:before,.btn:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  transition: 400ms ease all;
}

.btn:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
  width: 100%;
  transition: 800ms ease all;
}
/* Awesome button css End */
<div class="btn-margin">
    <a class="btn btn-green" href="#">
        Click Here To See Answers
      </a>
</div>

相关问题
最新问题