Wie platziere ich ein Label direkt unter einer Spanne?

Question

Ich habe Probleme, Etiketten direkt unter einem Span-Element zu platzieren. Wenn dies eine Eingabe wäre, für die ich das Label benötigt, würde ich dem Eingabeelement ein name-Attribut zuweisen und dem Label ein for = "name" -Attribut zuweisen. Es ist mir jedoch nicht möglich, einem Bereich ein Namensattribut zuzuweisen.

Ich muss eine Spanne verwenden, weil ich diese IcoMoon-Symbole verwenden möchte, die innerhalb einer Spanne platziert werden müssen.

Zur Zeit bin ich mit dem Etikett entweder links oder rechts der Spannweite fest. Ich kann nicht scheinen, dass es unter dem Span-Element zentriert ist.

Hier ist mein Code:

@font-face { 
 
\t font-family:icomoon; 
 
\t src:url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?-m9wrda); 
 
\t src:url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?#iefix-m9wrda) format("embedded-opentype"), 
 
      
 
     url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.ttf?-m9wrda) format("truetype"), 
 
     url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.woff?-m9wrda) format("woff"), 
 
     url(fonts/2ad343be.icomoon.svg#icomoon) format("svg"),url(fonts/69e79c77.icomoon.woff) format("woff"), 
 
     url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.svg?-m9wrda#icomoon) format("svg"); 
 
       
 
} 
 
.icon-bubbles{ 
 
    font-family: 'icomoon'; 
 
    speak: none; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    font-variant: normal; 
 
    text-transform: none; 
 
    line-height: 1; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    font-size:36px; 
 
    color:#f00; 
 
    border: 1px solid white; 
 
} 
 

 
.icon-bubbles:before { 
 
    content: "\e613"; 
 
} 
 

 
#back { 
 
    width: 400px; 
 
    height: 200px; 
 
    background: black; 
 
    color: white; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    margin-left: 5%; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid white; 
 
    height: 80px; 
 
} 
 

 
label { 
 
    border: 1px solid white; 
 
}

<div id="back"> 
 
    <br> 
 
    <table border> 
 
    <tr> 
 
     <td> 
 
     <span class="icon-bubbles"></span> 
 
     <label>Label Text</label> 
 
     </td> 
 
     <td> 
 
     <span class="icon-bubbles"></span> 
 
     <label>Label Text</label> 
 
     </td> 
 
     <td> 
 
     <span class="icon-bubbles"></span> 
 
     <label>Label Text</label> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Hier ist ein Link auf die JSFiddle: http://jsfiddle.net/8Lffy7sg/

Answer 1

You shouldn't be using the table element for layout for one thing, da table nur für tabellarische Daten verwendet werden soll. Aus diesem Grund habe ich den HTML-Code so umstrukturiert, dass er div verwendet. Als nächstes möchten Sie nur das Element span als display:block haben, wodurch das Element wie ein div wirkt und einen Zeilenumbruch für die folgenden Elemente verursacht.

Darüber hinaus sind Etiketten für die Verwendung in Formularen, Etikett ein input Feld konzipiert. Wenn Sie nur einen Text mit der span verbunden wünschen, verwenden Sie einfach einen anderen span oder einen p Tag.

@font-face { 
 
    font-family: icomoon; 
 
    src: url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?-m9wrda); 
 
    src: url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?#iefix-m9wrda) format("embedded-opentype"), url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.ttf?-m9wrda) format("truetype"), url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.woff?-m9wrda) format("woff"), url(fonts/2ad343be.icomoon.svg#icomoon) format("svg"), url(fonts/69e79c77.icomoon.woff) format("woff"), url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.svg?-m9wrda#icomoon) format("svg"); 
 
} 
 

 
.icon-bubbles { 
 
    font-family: 'icomoon'; 
 
    speak: none; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    font-variant: normal; 
 
    text-transform: none; 
 
    line-height: 1; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    font-size: 36px; 
 
    color: #f00; 
 
    border: 1px solid white; 
 
} 
 

 
.icon-wrapper { 
 
    float: left; 
 
} 
 

 
.icon-wrapper span { 
 
    display: block; 
 
} 
 

 
.icon-bubbles:before { 
 
    content: "\e613"; 
 
} 
 

 
#back { 
 
    width: 400px; 
 
    height: 200px; 
 
    background: black; 
 
    color: white; 
 
} 
 

 
label { 
 
    border: 1px solid white; 
 
}

<div id="back"> 
 
    <div class="icon-wrapper"> 
 
    <span class="icon-bubbles"></span> 
 
    <label>Label Text</label> 
 
    </div> 
 
    <div class="icon-wrapper"> 
 
    <span class="icon-bubbles"></span> 
 
    <label>Label Text</label> 
 
    </div> 
 
    <div class="icon-wrapper"> 
 
    <span class="icon-bubbles"></span> 
 
    <label>Label Text</label> 
 
    </div> 
 
</div>

Answer 2

Sie könnten versuchen, die <span> und die <label> jedes in einem div mit width:100% und text-align:center wie folgt setzen:

<div style="width:100%;text-align:center"> 

     <span class="icon-bubbles"></span> 
</div> 

<div style="width:100%;text-align:center"> 

     <label>Label Text</label> 
</div> 

Answer 3

Ich habe die folgende CSS:

td { 
    text-align: center; 
} 

Welche jedes td Element seinen Inhalt gemacht Anzeige zentriert.

Ich habe auch:

.icon-bubbles { 
    display: block; 
    margin: 10px 30px; 
} 

, die jeweils .icon-bubbles Display als Blockelement macht (was einen Zeilenumbruch und zwingt die label unter dem Symbol). Ich habe Ihre Margen reduziert, damit Sie das Beispiel besser sehen können.

Sie können die JSFiddle here anzeigen.