Wie ein div mit einem Bild horizontal innerhalb eines anderen div ausrichten

Ich habe eine Menge Probleme beim Erstellen einer Schaltfläche in CSS. So muss es funktionieren:Wie ein div mit einem Bild horizontal innerhalb eines anderen div ausrichten

Die Schaltfläche muss zwei Abschnitte haben, einen für den Call-to-Action-Text und den anderen mit einem nach rechts zeigenden Pfeil. Diese Schaltfläche muss dynamisch sein, in dem Sinne, dass sie in einem Content-Management-System verwendet wird, sodass sie ihre Höhe erweitern muss.

Der rechte Pfeil muss vertikal mit dem Text in der Mitte ausgerichtet werden, aber ich kann das nicht erreichen.

Hier ist mein HTML:

<div class="assetbuttonWrap"> 
    <div class="assetbuttonText"><a href="#" class="assetbuttonText">Click here to download the whitepaper</a></div><div class="assetbuttonIcon"><img src="images/arrow_right.png" width="8" height="12" alt="arrow"></div></div>

Und hier ist mein CSS

.assetbuttonWrap { 
    border: none; 
    padding: 12px 14px 12px 14px; 
    margin-top:12px; 
    height:100%; 
    background-color: #dddddd; 
    display:table; 
} 
.assetbuttonWrap:hover { 
    background-color: #B6B6B6; 
    cursor:pointer; 
} 
a.assetbuttonText:link { 
    text-decoration:none; 
    color: #666; 
} 

.assetbuttonText { 
    color: #737373; 
    display: inline-block; 
    font-size: 16px; 
    font-style: normal; 
    font-weight: 700; 
    line-height: 19px; 
    max-width: 93%; 
    text-align: left; 
    text-decoration: none; 
    vertical-align: middle; 
    display: table-cell; 
} 
.assetbuttonIcon { 
    vertical-align: middle; 
    display:inline-block; 
    max-width:10%; 
}

ich auch ein Bild angehängt haben, um zu sehen, wie es aussehen sollte.

CSS BUTTON

RIGHT ARROW

Danke für alle Antworten.

Quelle

2017-04-07 user3772368

Was ist los mit dem, was Sie jetzt haben? Sieht auf mich ausgerichtet aus. Ich habe einen Rand und 'display: table-cell' zum Icon div hinzugefügt ... das ist besser? ändert sich nicht viel https://jsfiddle.net/tfcvenfq/1/ –

Das ist eigentlich besser, funktioniert super! Vielen Dank! – user3772368

ok cool, war nicht sicher, da es nicht viel geändert hat. Ging voran und reichte als Antwort ein. Wenn das Problem dadurch gelöst wird, können Sie auf die Überprüfung durch die Antwort klicken, um sie als Lösung zu akzeptieren. –

Da Sie display: table auf dem übergeordneten verwenden, möchten Sie die direkten Kinder display: table-cell sein, wenn Sie wollen, gut arbeiten und die vertical-align Eigenschaft als eine Tabelle verwenden würde.

Hinzugefügt display: table-cell zu .assetbuttonIcon und gab diesem Element eine Auffüllung, um den Text vom Symbol zu trennen.

.assetbuttonWrap { 
 
    border: none; 
 
    padding: 12px 14px 12px 14px; 
 
    margin-top: 12px; 
 
    height: 100%; 
 
    background-color: #dddddd; 
 
    display: table; 
 
} 
 

 
.assetbuttonWrap:hover { 
 
    background-color: #B6B6B6; 
 
    cursor: pointer; 
 
} 
 

 
a.assetbuttonText:link { 
 
    text-decoration: none; 
 
    color: #666; 
 
} 
 

 
.assetbuttonText { 
 
    color: #737373; 
 
    font-size: 16px; 
 
    font-style: normal; 
 
    font-weight: 700; 
 
    line-height: 19px; 
 
    max-width: 93%; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
.assetbuttonIcon { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    max-width: 10%; 
 
    padding-left: .5em; 
 
}

<div class="assetbuttonWrap"> 
 
    <div class="assetbuttonText"><a href="#" class="assetbuttonText">Click here to download the whitepaper</a></div> 
 
    <div class="assetbuttonIcon"><img src="https://i.stack.imgur.com/Wxy1A.png" width="8" height="12" alt="arrow"></div> 
 
</div>

Quelle

2017-04-07 18:33:10

nicht viel was Sie tun müssen. Entfernen Sie einfach die Eigenschaft "lotrecht ausrichten" aus dem gesamten css-Abschnitt. addiere vertikale Ausrichtung: mittlere .assetbuttonIcon img {} img Klasse. überprüfen Sie die Schnipsel unten und hier ist ein livefiddle

.assetbuttonWrap { 
 
border: none; 
 
padding: 12px 14px 12px 14px; 
 
margin-top:12px; 
 
height:100%; 
 
background-color: #dddddd; 
 
display:table; 
 
} 
 
.assetbuttonWrap:hover { 
 
    background-color: #B6B6B6; 
 
    cursor:pointer; 
 
} 
 
a.assetbuttonText:link { 
 
    text-decoration:none; 
 
    color: #666; 
 
} 
 

 
.assetbuttonText { 
 
    color: #737373; 
 

 
    font-size: 16px; 
 
    font-style: normal; 
 
    font-weight: 700; 
 
    line-height: 19px; 
 
    max-width: 93%; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    
 
    display: table-cell; 
 
} 
 
.assetbuttonIcon { 
 

 
    display:inline-block; 
 
    max-width:10%; 
 
} 
 
.assetbuttonIcon img{ 
 
    vertical-align:middle; 
 
    padding-left: 10px; 
 
}

<div class="assetbuttonWrap"> 
 
<div class="assetbuttonText"><a href="#" class="assetbuttonText">Click here to download the whitepaper</a></div> 
 
    <div class="assetbuttonIcon"><img src="https://i.stack.imgur.com/Wxy1A.png" width="8" height="12" alt="arrow"></div> 
 
</div>

Quelle

2017-04-07 18:49:59

Wie ein div mit einem Bild horizontal innerhalb eines anderen div ausrichten

Antwort

Verwandte Themen