-Center eines Inline-Block-Element mit einem Link innerhalb eines td

EDIT: Hier ist ein JSBIN Link: https://jsbin.com/zapuvupato/edit?html,css,js,output wenn es-Center eines Inline-Block-Element mit einem Link innerhalb eines td

hilft

Ich versuche verzweifelt ein Element zu zentrieren. Ich habe versucht, Text-Align: Center in einem div außerhalb von/innerhalb der td. Es ist in der Stilklasse für den Link und Text festgelegt.

Es sieht aus wie der text-align angewandt wird, aber es tut nicht, was ich will, was den gesamten Inline-Block zum Zentrum ist, nicht nur den Link/Textes nach innen.

Ich erwäge HTML-Schaltflächen verwenden, wenn ich das nicht bekommen zu arbeiten.

td.TableButtonStyle { 

    display: inline-block; 
    border-radius: 10px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left:auto; 
    margin-right:auto; 
    color: white; 
    background-color: rgb(240,80,40); 
    font-weight: bold; 

} 
.TableButtonStyle a 
{ 
    color:white; 
    text-align:center; 
} 

.Bold 
{ 
    font-weight: bold; 
} 

th.thCells{ 
    text-align:center; 
    vertical-align:middle; 
    font-size: 13pt; 
    margin: 0px 5px; 
} 
td.TableCells { 
    text-align:center; 
    vertical-align:middle; 
    font-size: 13pt; 
    padding: 15px 25px; 
    margin: 10px 50px; 
} 
</style> 

<table style = "margin: 10px 0px"> 
    <tr> 
     <th class = "TableCells thCells Bold" style = "padding: 0px 15px">Deduction per Pay Period</th> 
    </tr> 

    <tr> 
     <td id = "button1" class = "TableButtonStyle" style = "font-size: 14pt; padding: 15px 25px"></td> 
    </tr> 

</table> 

<script> 

    var buttonText1 = "<a href=\"javascript: giveButton('"+suggestedAnnualAmt1+"'); onclick:Incr1();\">$"+suggestedAmtPPP1+"</a>"; 

document.getElementById("button1").innerHTML = buttonText1; 

</script>

Quelle

2016-04-12 Katy O

Möchten Sie einige Ihrer HTML etwas ausmachen, liefern? – ntgCleaner

Versuchen Sie, die td (oder what in td) zu zentrieren, wenn Sie th als die Gesamtbreite betrachten? –

Ein td-Set, das als Inline-Block angezeigt wird, füllt nicht die Tabellenbreite - es ist inline. Es wird nur so breit wie nötig sein. Also ist es * zentriert. In Ihrem Beispiel ist die Tabelle nur so breit wie das breiteste Element (dieses bestimmte td). Wenn Sie die Breite des td erhöhen, erhöht sich die Tischbreite. https://jsfiddle.net/NotInUse/tcb7m7nn/ - Vielleicht haben Sie nicht genug Probe Markup ?? – Scott

Sie sollten Ihr <td> Element wahrscheinlich nicht zu einem Button machen. Was würde ich stark ist vorschlagen Ihre <a> den gleichen Stil wie Ihr <td>, dann entfernen Sie den Stil aus dem TD zu geben und sagen Sie dem <td>-text-align:center;.

Ich habe die <td> Klasse auf etwas anderes geändert (.center-inside)

<td id = "button1" class="center-inside" style = "font-size: 14pt; padding: 15px 25px"></td>

und verändern dann die CSS, um die Schaltfläche (und fügte etwas Polsterung groß wieder zu machen), um Stil

td.center-inside { 
    text-align:center 
} 
.TableButtonStyle { 
    display: inline-block; 
    border-radius: 10px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left:auto; 
    margin-right:auto; 
    color: white; 
    background-color: rgb(240,80,40); 
    font-weight: bold; 
    padding:20px; 
}

Dann habe ich die .TableButtonStyle Klasse Ihren Button in der Javascript

var buttonText1 = "<a class='TableButtonStyle' href=\"javascript: giveButton('"+suggestedAnnualAmt1+"'); onclick:Incr1();\">$"+suggestedAmtPPP1+"</a>";

https://jsbin.com/mezudaciqi/1/edit?html,css,js,output

Quelle

2016-04-12 16:35:43 ntgCleaner

Das hat den Trick gemacht. Vielen Dank. –

Aus Neugier warum sollte ich nicht einen Knopf in einem td verwenden? –

Ein TD wird hauptsächlich als Tabellenzelle für Informationen verwendet. Die Innenseite des "" sollte als Knopf verwendet werden. Es ist einfach nicht "normal" und entspricht wahrscheinlich nicht den W3-Standards. Das ist alles. – ntgCleaner

Sie td nimmt nicht die gesamte Breite des Tisches. Ich kann mich irren, wenn ich dein Problem verstehe. Aber wenn Sie möchten, dass "a" in Ihrem "td" zentriert wird. Sie sollten Ihre td zu folgenden ändern (nur Breite hinzufügen).

<td id="button1" class="TableButtonStyle" style="font-size: 14pt; padding: 15px 25px; width:100%">

Quelle

2016-04-12 15:49:52

runterscrollen, wenn ich das mache, macht es den Inline-Block die ganze Zelle aufzunehmen, was ich nicht will. Ich habe versucht, die Breite auf 50% zu setzen, aber es ist immer noch linksbündig. –

In diesem Fall brauchen Sie ein anderes div. TD wird 100% haben, div ist was deine Taste ist, die richtig dimensioniert werden kann (wie benötigt) und dann dein inneres div. Zum Beispiel siehe: http: // Codepen.io/ravish_hacker/pen/WwMWYW Lass mich wissen, wenn das ist, was du brauchst, werde ich meine Antwort mit dem Code aktualisieren :) –

Das bringt mich näher, aber gibt es einen Weg, es ohne Angabe der Breite zu tun? Ich möchte, dass die Zellengröße basierend auf der Länge des Linktextes dynamisch ist. Danke für Ihre Hilfe. –

-Center eines Inline-Block-Element mit einem Link innerhalb eines td

Antwort

Verwandte Themen