Warum zentriert sich meine Taste nicht wie andere Elemente?

Ich benutze Bootstrap 3.x und ich habe ein div, das ist relativ zur Position und die Schaltfläche (ein Tag) ist auf absolute Position gesetzt, weil ich möchte, dass die Schaltfläche an der Unterseite: 10px ;.Warum zentriert sich meine Taste nicht wie andere Elemente?

Ich möchte auch die Schaltfläche zentriert. Warum ist es hier halb zentriert? (Ich habe die Text-Center-Klasse benutzt).

See jsfiddle: https://jsfiddle.net/0dhcoucd/4/

CSS:

.box-badge-orange { 
    background-color: orange; 
    position:relative; 
    height:30em; 
} 

.box-badge-orange a { 
    position: absolute; 
    bottom: 10px; 
} 

.divaround { 
    text-align:center; 
}

Quelle

2017-10-02 knox-flaneur

Zunächst einmal haben Sie inkonsistent html. Schließen Sie Ihre p-Tags, und versuchen Sie nicht, ein div in einem p-Tag hinzuzufügen. Und Sie haben Ihren Knopf auf absolute Position gestellt. – Ibu

Vielen Dank für das Abfangen des Tippfehlers, aber das löst das Problem nicht, noch hat es Auswirkungen auf die Ausgabe in diesem Fall. –

Versuchen Sie Folgendes: https://Stackoverflow.com/a/46534250/5236174 –

mit dieser Art von Problem umgehen, fügen Grenzen der damit verbundenen Element, dass Sie die Informationen ihrer Position liefert und Sie erhalten die Idee, was falsch ist.

Anstatt "button/link" absolute und untere, machen Sie den Wrapper (überprüfen div mit Klasse .place-bottom) absolut, und mit width: 100% und verwenden .text-center, um Button/Link-Center innerhalb der Wrapper div.

.box-badge-orange { 
 
    background-color: orange; 
 
    position:relative; 
 
    height:30em; 
 
} 
 

 
.box-badge-orange .place-bottom { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    border:1px solid black; 
 
    width:100% 
 
}

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

 

 

 
<div class="box-badge-orange"> 
 
     <h2>Title Here</h2> 
 
     <p class="text-center">Lorem ipsum</p> 
 
     <div class="place-bottom text-center"> 
 
      <a class="btn btn-primary btn-lg" 
 
      href="/providers/physician-network/about/Pages/Leadership.aspx"> 
 
       Click here 
 
      </a> 
 
    </div> 
 
</div>

Quelle

2017-10-02 21:52:06

Warum zentriert sich meine Taste nicht wie andere Elemente?

Antwort

Verwandte Themen