Wie man Bild und Knopf in einem Rand oder einer Box hinzufügt?

Question

Ich möchte ein Bild und eine Schaltfläche in einer Box hinzufügen.

Ich möchte das Bild oben und die Schaltfläche unter dem Bild. Ich möchte beide in einer festen Grenze.

Answer 1

So etwas könnte Ihnen den Einstieg:

<div id="myBox" style="width:200px;padding:10px;text-align:center;border:2px solid purple;"> 
 
    <img src="http://placekitten.com/100/150" /><br> 
 
    <button>Click Me</button> 
 
</div>

---

Beachten Sie, dass wir in der Regel das Styling trennen (style=) aus dem HTML:

<style> 
    #myBox {width:200px;padding:10px;text-align:center;border:2px solid purple;} 
</style> 
<div id="myBox"> 
    <img src="http://placekitten.com/100/150" /><br> 
    <button>Click Me</button> 
</div> 

Answer 2

Sie kann das folgende Snippet verwenden Holen Sie sich die gewünschte Wirkung (Hinweis: dies nur ein Beispiel ist gezeigt, wie ein Bild und Text mit HTML und CSS hinzufügen kann, auf die Schaltfläche klicken, wird es nicht umleiten oder eine Aktion ausführen):

HTML:

<button class="btn btn-primary tweetButton"> 
    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png" width="20" height="20" /> 
    <p>Tweet</p> 
</button> 

CSS:

.tweetButton { 
    width: 90px; 
} 

.tweetButton p { 
    margin: 0 0 2px; 
} 

prüfen aus der Demo here.