Image caption to the left of image
Question
Hi currently my site looks like this, i wanted the mastercard logo to have the "Debit / credit card" caption to the left of the image and have the image floating evenly in between the bottom border above it and the top border below it how can i do this either within the HTML but ideally how can I do this using CSS already tried putting them in a div and adjusting the margins and floats but they did not turn out well im assuming i was using them wrong anyway.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href="stylesheet.css" type='text/css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="js/javascript.js"></script>
</head>
<body onload='document.form1.text1.focus()'/>
<div class="b">
<h2>Payment Options</h2>
</div>
<figure style = "float:centre;">
<img src="image/Mastercard.jpg" alt="Mastercard Logo" width="81" height="56">
<figcaption>Debit / Credit Card</figcaption>
</figure>
<div class="mail">
<form name="form1" action="#">
<ul>
<div class="container">
<div class="row">
<div class="col-sm-2">Card Number</div>
<div class="col-sm-3"><input type='text' name='CardNumber' /></div>
</div>
<div class="row">
<div class="col-sm-2">Expiration Date</div>
<div class="col-sm-1">
<select id="Month">
<option disabled selected>Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
<div class="col-sm-1">
<select id="Year" style="margin-left:10px">
<option disabled selected>Year</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-2">Security Code</div>
<div class="col-sm-2"><input type='text' name='text2' /></div>
</div>
</div>
<li> </li>
<div class="form-group" id="pay-now">
<li class="continue"><input type="button" id="inputBtn" name="submit" value="Continue"
onclick="cardnumber(document.form1.text1)"/></li>
</div>
<li> </li>
</ul>
</form>
</div>
<script src="js/credit-card-master-validation.js"></script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2020-03-31 15:37:12
Try this. First, put the figure html into a div.container. Then move the figcaption above the image. Finally, remove the styling for the figure element and give it a display: flex.
.cc{ display: flex; align-items: center; }
<div class="container"> <figure class="cc"> <figcaption class="cc-caption">Debit / Credit Card</figcaption> <img src="http://placekitten.com/200/50" alt="Mastercard Logo" width="81" height="56"> </figure> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.