css中怎麼把圖片設定居右
- 醉折花枝作酒筹原創
- 2021-04-23 14:43:5418309瀏覽
在css中，可以使用text-align屬性把圖片設定居右，只需要給圖片元素設定「text-align:right;」即可。 text-align屬性指定元素文字的水平對齊方式，當值為right時，表示該元素排列到右邊。
本教學操作環境：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中怎麼把圖片設定居右的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css怎麼設定圖片拉伸下一篇：css怎麼設定圖片拉伸