圖片 css div居中代碼怎麼寫-前端問答-PHP中文網

首頁

web前端

前端問答

圖片 css div居中代碼怎麼寫

藏色散人

Jan 04, 2021 am 10:22 AM

css

圖片css div居中程式碼的寫法：先將display設定成table-cell；然後水平居中設定text-align為center；最後將垂直置中設定vertical-align為middle即可。

圖片 css div居中代碼怎麼寫

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

推薦：《css影片教學》

body結構

<body>
<div>
<img src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"   alt="haha">
</div>
</body>

方法一：

將display設定成table-cell ，然後水平居中設定text-align為center，垂直居中設定vertical-align為middle。

<style type="text/css">
*{margin: 0;padding: 0;}
    div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
        width: 50px;
  height: 50px;
}
</style>

結果如下圖所示：

圖片 css div居中代碼怎麼寫

方法二：

透過position定位來實現。將div設定成相對定位relative，將img設定成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位於div的中心，要是圖片的中心位於div的中心，就需要將圖片向上移動圖片高度的一半，並向左移動圖片寬度的一半。

<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
left: 50%;
  margin-top: -25px; /* 高度的一半 */
  margin-left: -25px; /* 宽度的一半 */
}
</style>

結果如下圖所示：

圖片 css div居中代碼怎麼寫

方法三：可以用在不清楚圖片圖片或元素的真實寬高情況下

還是透過position定位來實現。將div設定成相對定位relative，將img設定成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位於div的中心，要是圖片的中心位於div的中心，就需要將圖片向上移動圖片高度的一半，並向左移動圖片寬度的一半，如果不知道元素的寬高，可以用transform: translate(-50%,-50%);

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

方法四：

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

方法五：彈性佈局flex

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

效果都一樣，希望能幫到大家！

以上是圖片 css div居中代碼怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

React的生態系統的大小：瀏覽複雜的景觀Apr 28, 2025 am 12:21 AM

TonavigateReact'scomplexecosystemeffectively,understandthetoolsandlibraries,recognizetheirstrengthsandweaknesses,andintegratethemtoenhancedevelopment.StartwithcoreReactconceptsanduseState,thengraduallyintroducemorecomplexsolutionslikeReduxorMobXasnee

React如何使用密鑰有效地識別列表項目Apr 28, 2025 am 12:20 AM

RectuseSkeyStoeficelyListifyListIdifyListItemsbyProvidistableIdentityToeachelement.1）keysallowReaeActTotRackChangEsInListSwithouterSwithoutreThoutreTheenteringTheEntirelist.2）selectuniqueandstablekeys，避免使用

KeysinrectarecrucialforOptimizingTherEnderingProcessandManagingDynamicListSefectefection.tospotaTandFixKey與依賴的人：1）adduniqueKeykeystoliquekeystolistItemStoAvoidWarningSwarningSwarningSwarningSperformance和2）useuniqueIdentifiersIdentifiersIdentifiersIdentifiersFromdatainSteAtofIndicessuessuessessemessuessessemessemessemesseysemessekeys，3）

React的單向數據綁定：確保可預測的數據流Apr 28, 2025 am 12:05 AM

React的單向數據綁定確保數據從父組件流向子組件。 1)數據流向單一，父組件狀態變化可傳遞給子組件，但子組件不能直接影響父組件狀態。 2)這種方法提高了數據流的可預測性，簡化了調試和測試。 3)通過使用受控組件和上下文，可以在保持單向數據流的同時處理用戶交互和組件間通信。

在React組件中選擇和管理密鑰的最佳實踐Apr 28, 2025 am 12:01 AM

KeysinReactarecrucialforefficientDOMupdatesandreconciliation.1)Choosestable,unique,andmeaningfulkeys,likeitemIDs.2)Fornestedlists,useuniquekeysateachlevel.3)Avoidusingarrayindicesorgeneratingkeysdynamicallytopreventperformanceissues.

在React應用中使用USESTATE（）優化性能Apr 27, 2025 am 12:22 AM

USESTATE（）ISCICIALFOROPTIMINECREACTAPPPERFORMACTACEUTOPACTONCACTONRE REDERSANDUPDATES.TOOPTIMIZE：1）USEUSECALLBACKTOMEMOEMOEIZEFUNCTIONSANDPREVENTUNNNNNNNNNNNNNNNNENESMARYRERER.2）limemememememoforcachingExpensiveComputations.3）

使用上下文和usestate（）在組件之間共享狀態Apr 27, 2025 am 12:19 AM

使用Context和useState共享狀態是因為它們可以簡化大型React應用中的狀態管理。 1)減少propdrilling，2)代碼更清晰，3)更易管理全局狀態。但要注意性能開銷和調試複雜性，合理使用Context和優化技術可以提升應用的效率和可維護性。

不正確鍵對React虛擬DOM更新的影響Apr 27, 2025 am 12:19 AM

使用不正確的鍵會導致React應用程序中的性能問題和意外行為。 1)鍵是列表項的唯一標識符，幫助React高效地更新虛擬DOM。 2)使用相同或不唯一的鍵會導致列表項重新排序和組件狀態丟失。 3)使用穩定且唯一的標識符作為鍵可以優化性能，避免全量重渲染。 4)使用工具如ESLint來驗證鍵的正確性。正確使用鍵可以確保React應用的高效和可靠性。

See all articles