图片左侧的图片说明

Question

嗨，目前我的网站看起来像这样，我希望万事达卡徽标在图像左侧具有“借记卡/信用卡”标题，并使图像均匀浮动在其上方的底部边框和下方的顶部边框之间我在 HTML 中执行此操作，但理想情况下如何使用 CSS 执行此操作已经尝试将它们放在 div 中并调整边距和浮点数，但结果不是很好，我假设我无论如何都错误地使用了它们。

这是我的 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>&nbsp;</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>&nbsp;</li>
</ul>
</form>
</div>
<script src="js/credit-card-master-validation.js"></script>
</body>
</html>

Answer 1

尝试这个。 首先，将图形html放入一个div.container中。 然后将 figcaption 移动到图像上方。 最后，删除图形元素的样式并给它一个 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>

图片左侧的图片说明

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-31 15:37:12

图片左侧的图片说明

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-31 15:37:12

解决方案1
1 已采纳 2020-03-31 15:37:12