首頁  >  文章  >  web前端  >  css中怎麼把圖片設定居右

css中怎麼把圖片設定居右

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-23 14:43:5418280瀏覽

在css中,可以使用text-align屬性把圖片設定居右,只需要給圖片元素設定「text-align:right;」即可。 text-align屬性指定元素文字的水平對齊方式,當值為right時,表示該元素排列到右邊。

css中怎麼把圖片設定居右

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

新建一個html文件,命名為test.html,用於講解css如何讓div中的圖片居右對齊。在test.html檔案內,使用div標籤建立一個模組,設定div標籤的class屬性為mycss。在div內,使用img標籤建立一張圖片。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
<div class="mycss">
    <img src="images/2.jpg" alt="">
</div>
</body>
</html>

在css標籤內,透過class設定div的樣式,定義它的寬度為400px,高度為300px,邊框為1px。再將text-align屬性設為right,用於讓div內的內容居右對齊,從而實現圖片居右對齊。

<style type="text/css">
        .mycss{
            width:400px;
            height: 300px;
            border: 1px solid #ccc;
            text-align: right;
        }
</style>

在瀏覽器開啟test.html文件,查看實現的效果。

css中怎麼把圖片設定居右

推薦學習:css影片教學

#

以上是css中怎麼把圖片設定居右的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn