Kann nicht zentrieren Ausrichtung Knopf

Ich kann nicht herausfinden, warum das nicht funktioniert? Ich versuche den Knopf innerhalb der div zu zentrieren. Aus irgendeinem Grund, egal was ich mache, rechtfertigt der Knopf links innerhalb der div.Kann nicht zentrieren Ausrichtung Knopf

Hier ist meine aktuelle HTML, die ich dachte, würde absolut funktionieren, aber nicht gehen.

<div class="row block well" id="section3"> 
     <h1 style="text-align:center">Client Testimonials</h1> 
     <div class="col-md-3"></div> 
     <div class="col-md-6"> 
      <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him.<br> 
       <button class="buttonz" onclick="cycle()"><span>More </span></button> 
      </p> 
     </div> 
     <div class="col-md-3"></div> 
    </div>

Und hier ist die CSS, die

.buttonz { 
    display: inline-block; 
    border-radius: 10px; 
    background-color: #b5cfc1; 
    border: none; 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 28px; 
    padding: 20px; 
    width: 200px; 
    transition: all 0.5s; 
    cursor: pointer; 
    margin: auto; 
} 

.buttonz span { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    transition: 0.5s; 
} 

.buttonz span:after { 
    content: '\00bb'; 
    position: absolute; 
    opacity: 0; 
    top: 0; 
    right: -20px; 
    transition: 0.5s; 
} 

.buttonz:hover span { 
    padding-right: 25px; 
} 

.buttonz:hover span:after { 
    opacity: 1; 
    right: 0; 
}

jemand, wo ich falsch adressiert wird ging gefunden?

Quelle

2017-01-19 RhinoTekMN

Sowohl Ihr p Tag und button Notwendigkeit gleiche Anzeigeeigenschaft haben. Da das p-Tag standardmäßig display: block; ist, fügen Sie dasselbe auch zu Ihrer Schaltfläche hinzu.

.buttonz { 
    display: block; 
}

Hier ist eine funktionierende Demo.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     .buttonz { 
 
      display: block; 
 
      border-radius: 10px; 
 
      background-color: #b5cfc1; 
 
      border: none; 
 
      color: #FFFFFF; 
 
      text-align: center; 
 
      font-size: 28px; 
 
      padding: 20px; 
 
      width: 200px; 
 
      transition: all 0.5s; 
 
      cursor: pointer; 
 
      margin: auto; 
 
     } 
 
     
 
     .buttonz span { 
 
      cursor: pointer; 
 
      display: inline-block; 
 
      position: relative; 
 
      transition: 0.5s; 
 
     } 
 
     
 
     .buttonz span:after { 
 
      content: '\00bb'; 
 
      position: absolute; 
 
      opacity: 0; 
 
      top: 0; 
 
      right: -20px; 
 
      transition: 0.5s; 
 
     } 
 
     
 
     .buttonz:hover span { 
 
      padding-right: 25px; 
 
     } 
 
     
 
     .buttonz:hover span:after { 
 
      opacity: 1; 
 
      right: 0; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="row block well" id="section3"> 
 
     <h1 style="text-align:center">Client Testimonials</h1> 
 
     <div class="col-md-3"></div> 
 
     <div class="col-md-6"> 
 
      <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him. 
 
       <br> 
 
       <button class="buttonz" onclick="cycle()"><span>More </span></button> 
 
      </p> 
 
     </div> 
 
     <div class="col-md-3"></div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-01-19 05:27:54 Nitheesh

Warum halten Sie Knopf innerhalb <p> des Tags? Sie können this sehen, was ich für Sie in Codepen getan habe.

Quelle

2017-01-19 04:51:51

Sie müssen die Schaltfläche der Anzeigeeigenschaft zu 'Block' von 'inline-block' ändern

.buttonz { display: block; .... }

oder sogar

.buttonz { display: table; .... }

https://jsfiddle.net/cjm5L59z/

Wenn Sie sich fragen, warum margin: 0 auto funktioniert nicht mit einem Inline-Block-Element, beziehen Sie sich auf diese Fragen:

What is the difference between display: inline and display: inline-block?

div with display:inline-block margin 0 auto not center

Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

Quelle

2017-01-19 05:22:31 Aj334

.buttonz { 
 
    display: inline-block; 
 
    border-radius: 10px; 
 
    background-color: #b5cfc1; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 28px; 
 
    padding: 20px; 
 
    width: 200px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin: auto; 
 
} 
 

 
.buttonz span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 

 
.buttonz span:after { 
 
    content: '\00bb'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 

 
.buttonz:hover span { 
 
    padding-right: 25px; 
 
} 
 

 
.buttonz:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="row block well" id="section3"> 
 
     <h1 style="text-align:center">Client Testimonials</h1> 
 
     <div class="col-md-3"></div> 
 
     <div class="col-md-6 text-center"> 
 
      <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him.<br> 
 
       <button class="buttonz" onclick="cycle()"><span>More </span></button> 
 
      </p> 
 
     </div> 
 
     <div class="col-md-3"></div> 
 
    </div>

Ich habe in col-md-6text-center Klasse nur setzen. und es funktioniert.

Hier ist JSFiddle

Quelle

2017-01-19 05:26:11

try this

Wickeln Sie ein div um Knopf und addieren style = "text-align: center;"

<div style="text-align: center;"> <button class="buttonz" onclick="cycle()"><span>More </span></button></div>

Quelle

2017-01-19 05:26:59 Sreemat

Vielen Dank für den Hinweis.Ich habe das versucht, aber wie unten erwähnt, lag es daran, dass ich zwei verschiedene Display-Zuweisungen hatte. – RhinoTekMN

unter css Versuchen Taste in der Mitte zu bekommen.

.buttonz { display: block; margin: 0 auto; }

Quelle

2017-01-19 05:30:58

@RhinoTekMN überprüfe meine Antwort –

Kann nicht zentrieren Ausrichtung Knopf

Antwort

Verwandte Themen