css偽元素實現圖片水平垂直居中

阿新 • • 發佈：2018-12-04

通常，我們在開發頁面的時候，遇到固定圖片大小的情況較為常見，但是，也有某種特殊情況，那就是在固定大小的父元素中，顯示大小不固定且寬高都不會超過父元素大小的圖片，下面我們直接看程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片上下左右居中</title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        .picture 
{width: 170px;height: 230px;border: 1px solid #ddd;padding: 5px;margin: 20px auto;text-align: center;}
        .picture:before{content:"";height: 100%;display: inline-block;vertical-align: middle;width: 0;}
        .picture img{vertical-align: middle;max-width: 170px;max-height: 230px;}
    </style>
</head 
>
<body>
    <div class="picture"><img src="1.jpg" alt=""></div>
    <div class="picture"><img src="2.jpg" alt=""></div>
</body>
</html>

實現效果圖如下所示

這裡寫圖片描述

css偽元素實現圖片水平垂直居中

通常，我們在開發頁面的時候，遇到固定圖片大小的情況較為常見，但是，也有某種特殊情況，那就是在固定大小的父元素中，顯示大小不固定且寬高都不會超過父元素大小的圖片，下面我們直接看程式碼。 <!DOCTYPE html> <html lang="en"> <h

純CSS實現圖片水平垂直居中於DIV（圖片未知寬高）

分享分享圖片 gin pos pic ble 居中實現圖 class .demo{border:1px #ddd solid;width:267px;height:267px;overflow:hidden;text-align:center;display:tabl

實現div裏的img圖片水平垂直居中

ble padding div height class 水平垂直 gin tag 實現 <body> <div> <img src="1.jpg" alt="haha"> </div> </body> 將

html css實現文字水平垂直居中顯示

這幾天在工作中遇到了一個小問題：文字內容怎麼能在div裡水平垂直居中顯示呢？同時群裡的小夥伴恰巧也有提問這個問題的，所以我就總結了一下我知道的方法。一、利用行高(line-height)和vertical-align配合實現具體做法如下： html: <div clas

css圖片水平垂直居中方式

1.css圖片居中(水平居中和垂直居中) 下面分幾種居中情況分別介紹: 1.利用margin: 0 auto實現圖片水平居中 2.利用文字的水平居中屬性text-align: center css圖片垂直居中 1.利用高==行高實現圖片垂直居中這

實現div裡的img圖片水平垂直居中

body結構 <body> <div> <img src="1.jpg" alt="haha"> </div> &l

css 未知寬高的元素實現水平方垂直居中

<!DOCTYPE html><html><head><title></title></head><style type="text/css">.parent{display: table;h

css實現div水平垂直居中

　　中秋快到了，祝大家中秋快樂。　　平時大家寫bug過程中肯定會遇到讓div框水平或者垂直居中，然而有時候能居中，有時候不能居中。我把平時遇到的一些方法寫出來，如果對你有用，那便是晴天。　　1、text-align: center; text-align: center; 　　這個是最簡單的了，實現文

圖片水平垂直居中

水平垂直居中 box class order pla ima 例如一個 ext 首先在img標簽外面加一層div: 例如： html: <div class="imgbox"> <img src="" /> </div>

圖片水平垂直居中對齊的四種做法

span log 屬性 wid 水平垂直居中 code absolute webkit 居中對齊在前端開發中，圖片垂直居中對奇是很常見的，有些是固定高度，有些沒有固定高度，本文分享我用的四種方法，希望對你有所啟發。以下說的做法暫不考慮IE瀏覽器的兼容性，適用於移動端以

div中圖片水平垂直居中

<div id="Container" data-options="region:'center',maximized:true" > <span><img id="image" alt="image"/></span> <

用JQuery使列表中的圖片水平垂直居中顯示

像案例中心這些放置小LOGO的地方，有些logo圖片的尺寸都無法做到一致，也沒功夫用PS統一尺寸，這時候可以使用line-height+text-align: center來自動居中，在不使用line-height的情況下，用text-align: center和JS使小圖片自

vue中動態繫結背景圖, 圖片水平垂直居中

vue中動態繫結背景圖，並且使寬高不等的圖片水平垂直居中外層父元素固定寬高，讓圖片垂直居中的方法 <div style="width:200px;height:200px;"> <div :style="{backgroundImage: 'url(' + it

CSS元素（文字、圖片）水平垂直居中方法

1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-height 6、上下左右padd

css 實現元素水平垂直居中的幾種方法

在做網頁的時候經常會需要讓某一個元素水平垂直居中，而要實現水平垂直居中有很多種方法，不知道你們有沒遇到這種情況：方法倒是知道，甚至還知道許多種，可一到真正用到的時候，卻突然在努力地回想，這或許就是人們經常說的「腦子短路」，所以，這篇文章和大家一起來溫故而知新，梳

用 CSS 和 JS 實現元素的水平垂直居中

一、CSS 實現（2種方法）方法1：已知要居中元素的寬高 .d1{ width:200px; height:200px; background-

[CSS]圖片、多行文本、多行文本與圖片的水平垂直居中

支持 clas ont body style back rgb 添加 vertica 圖片垂直居中：IE8+支持方法1.box { line-height:300px; text-align:center;}.box>img { vertical-a

小tip: margin:auto實現絕對定位元素的水平垂直居中

實現可用偏移 css代碼百度 add 包含塊統計 ica 轉載自：http://www.zhangxinxu.com/wordpress/?p=3794 一、絕對定位元素的居中實現如果要問如何CSS實現絕對定位元素的居中效果，很多人心裏已經有答案了。兼容性不

CSS元素水平垂直居中的方法

垂直 .com put ron spa blank span osi 絕對定位 1. 元素水平居中 1.1 設置父元素的屬性 text-align: center; 說明：此屬性只針對父元素的子元素為內聯元素時有效，比如：img，input，select，but

css中實現水平垂直居中的幾種方式

css水平垂直居中水平居中（1）使用inline-block+text-align<div class="parent"><div class="child">demo</div></div> .child {

css偽元素實現圖片水平垂直居中

相關推薦