簡體   English   中英

圖片左側的圖片說明

[英]Image caption to the left of image

嗨,目前我的網站看起來像這樣,我希望萬事達卡徽標在圖像左側具有“借記卡/信用卡”標題,並使圖像均勻浮動在其上方的底部邊框和下方的頂部邊框之間我在 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>

嘗試這個。 首先,將圖形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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM