Wie center ein HTML-element mit border-entspricht der Breite

Knifflige Sache, ich habe eine HTML-Titel, mit border-top und border-bottom angewendet werden.
Kann ich zentrieren Sie es so, dass die Grenzen, die die gleiche Breite wie das element ?
Jetzt habe ich kläglich verwenden Breite, das ist überhaupt nicht eine gute Lösung.

Sehen Sie hier eine demo : http://codepen.io/anon/pen/KIJAh

HTML

<div>
<h3 class="removeMe">All your base</h3>
</div>

CSS

div {
 padding-top: 30px;
 height: 100px;
 width: 300px;
 margin: 0 auto;  
 background-color: Moccasin;
}

h3 {
  text-align: center;
  display: block;
  border-top: 1px solid black;
  border-bottom: 1px solid black; 
  margin: 0 auto;
}

.removeMe {
 width:160px;
}
InformationsquelleAutor kursus | 2013-04-23
  1. 3

    Gibt es zwei Optionen, die ich denken kann:

    1) set h3 display: inline UND legen Sie das übergeordnete element zu haben text-align: center

    • Die erste ist die Antwort. Zweite nicht zentriert den text
    • aktualisiert die zweite Arbeit - auto-margins und position relative display inline zentriert den text
    • NÖ immer noch nicht, Mitte: jsfiddle.net/6FfZe/1
    • Lösung 1-der trick, aber trotz update-Lösung 2 nicht funktioniert, können Sie bieten ein funktionierendes Beispiel ? Trotzdem danke für die Antwort.
    • Hier ist ein Turnschuh für option 1: jsfiddle.net/aEa74/1
    • Option 2, Sie müssten angeben, eine Breite, merkte ich, was Sie sagte, Sie nicht wollen, zu tun haben... aber hier ist ein Turnschuh anyways jsfiddle.net/9kA9G

    InformationsquelleAutor
  2. 2

    Könnte man hinzufügen display: inline zu Ihrem h3-Selektor:

    h3 {
  text-align: center;
  display: block;
  border-top: 1px solid black;
  border-bottom: 1px solid black; 
  margin: 0 auto;
  display: inline;
}

    Dies wird natürlich Auswirkungen auf das layout Verhalten.

    BEARBEITEN OP will, dass der text zentriert:

    Halten Sie den text zentriert hinzufügen text-align: center zu den Eltern:

    div {
    padding-top: 30px;
    height: 100px;
    width: 300px;
    margin: 0 auto;  
    background-color: Moccasin;
     text-align: center;
}
    • Text ist nicht zentriert auf diese Weise.
    • Das ist das, was ich meinte mit dem layout Verhalten. Ich hab meine Antwort bearbeitet
    InformationsquelleAutor Kenneth
  3. 0

    Können Sie display:inline-block; auf h3 statt display:block;

    • Wie kann man zentrieren Sie den text dann ?
    • Text-align:center auf den div.
    InformationsquelleAutor hupsohl
  4. 0

    Ich würde empfehlen, display:inline, aber wenn, bricht Sie Ihr layout und Sie nicht wollen, um es zu beheben. Möchten Sie vielleicht zu geben, die Tabelle zu versuchen. Ihr scheint zu funktionieren wie Sie es wollen, in Ihre demo. Nicht 100% sicher, dass seine noch brauchbare css-obwohl.

    display: table;
    InformationsquelleAutor AJak
  5. 0

    Wenn Ihr auf der Suche, um die Position ausgerichtet werden, um die Mitte ...

    http://codepen.io/anon/pen/xoFKH

    Hervorgehoben, div-hintergrund machen es offensichtlich :/

    InformationsquelleAutor lotsofcode
  6. 0
    <div class="heading__wrap">
   <h2 class="heading__title">Music to Our Ears</h2>
</div>

<style type="text/css">
    .heading__wrap{
       display: table;
       margin: 0 auto;
    }
    .heading__wrap .heading__title{
      border-bottom: 2px solid #7f4cab;
      padding-bottom: 12px;
      font-size: 36px;
      font-weight: 300;
      line-height: 42px;
      margin-bottom: 50px;
    }

</style>

    Dies funktioniert für mich.

    InformationsquelleAutor Muddasir Abbas
Schreibe einen Kommentar