Câu hỏi Làm thế nào để sắp xếp theo chiều dọc một hình ảnh bên trong một div?


Câu hỏi

Làm thế nào bạn có thể sắp xếp một hình ảnh bên trong một div?

Thí dụ

Trong ví dụ của tôi, tôi cần phải căn giữa theo chiều dọc <img> bên trong <div> với class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.framechiều cao của cố định và chiều cao của hình ảnh là không rõ. Tôi có thể thêm các phần tử mới vào .frame nếu đó là giải pháp duy nhất. Tôi đang cố gắng làm điều này trên IE7, Webkit, Gecko.

Xem jsfiddle đây


1132
2017-09-01 16:25


gốc


Xin chào, xin lỗi nhưng tôi không đồng ý về việc sử dụng một người trợ giúp ở đây là giải pháp được đánh giá cao nhất. Nhưng đó không phải là cách duy nhất. Các trình duyệt khác được hỗ trợ bởi trình duyệt. Tôi cung cấp một giải pháp ở đây xuống stackoverflow.com/a/43308414/7733724 và W3C.org về thông tin. Bạn có thể kiểm tra. Chúc mừng - Sam
Có thể trùng lặp Làm thế nào để theo chiều dọc trung tâm một div cho tất cả các trình duyệt? - Jitendar
Bài tập trung tâm Bài viết về W3C sẽ hữu ích: w3.org/Style/Examples/007/center.en.html - QMaster


Các câu trả lời:


Cách duy nhất (và trình duyệt chéo tốt nhất) như tôi biết là sử dụng inline-block người trợ giúp height: 100% và vertical-align: middle trên cả hai yếu tố.

Vì vậy, có một giải pháp: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* this is required unless you put the helper span closely near the img */
    
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Hoặc, nếu bạn không muốn có thêm phần tử trong trình duyệt hiện đại và không ngại sử dụng biểu thức IE, bạn có thể sử dụng phần tử giả và thêm nó vào IE bằng Biểu thức thuận tiện, chỉ chạy một lần cho mỗi phần tử, sẽ không có bất kỳ vấn đề về hiệu suất nào:

Giải pháp với :before và expression() cho IE: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=250 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=25 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=23 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=21 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=19 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=17 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=15 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=13 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=11 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=9 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=7 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=5 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=3 /></div>


Làm thế nào nó hoạt động:

  1. Khi bạn có hai inline-block các yếu tố gần nhau, bạn có thể sắp xếp từng mặt của nhau, vì vậy với vertical-align: middle bạn sẽ nhận được một cái gì đó như thế này:

    Two aligned blocks

  2. Khi bạn có một khối có chiều cao cố định (bằng px, em hoặc đơn vị tuyệt đối khác), bạn có thể đặt chiều cao của khối trong %.

  3. Vì vậy, thêm một inline-block với height: 100% trong một khối có chiều cao cố định sẽ căn chỉnh khác inline-block yếu tố trong đó (<img/> trong trường hợp của bạn) theo chiều dọc gần nó.

1820
2017-09-05 16:04



Đã thêm giải thích trong bản chỉnh sửa. Hỏi về bất cứ điều gì khác và tôi sẽ giải thích nó :) - kizu
Điều thú vị là tôi có thể làm điều này trong 2 giây bằng cách sử dụng các bảng, nhưng tôi bắt buộc phải sử dụng các hacks trình duyệt như kinh doanh của ai đó để làm việc này trong CSS thuần túy. Giải pháp tuyệt vời btw :) - dana
THANH TOÁN NHẬN rằng: <img src=""/> KHÔNG ở bên trong <span></span> helper đã được thêm vào. Nó ở bên ngoài. Tôi chỉ là kéo tất cả các sợi tóc của tôi bằng cách không nhận ra điều này. - ryan
Có vẻ như bạn cũng cần phải thêm "không gian trắng: nowrap;" vào khung hoặc bạn sẽ gặp phải sự cố nếu bạn có ngắt dòng giữa hình ảnh của bạn và khoảng thời gian trợ giúp. Nó đã cho tôi một giờ lý do tại sao giải pháp này đã không làm việc cho tôi. - juminoz
Chúa ban phước cho bạn @juminoz Điều đó giống như một giờ trong cuộc đời tôi! Các cm bị lỗi mà tôi đang sử dụng có trường văn bản cũ trên mặt phẳng. Thậm chí không xem xét không gian màu trắng là vấn đề. - lupos


Điều này có thể hữu ích:

div {
    position:relative;
    width:200px;
    height:200px;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

Tài liệu tham khảo : http://www.student.oulu.fi/~laurirai/www/css/middle/


447
2017-07-30 05:57



Điều này là tốt đẹp, nhưng không hoạt động trong IE 7: ( - Aram Kocharyan
Nếu bạn muốn sắp xếp theo chiều ngang hình ảnh, hãy thêm trái: 0; quyền: 0; để img - jameskind
Điều này là tốt đẹp, nhưng không hoạt động trong IE 10: ( - Jenny O'Reilly
Damn này hoạt động tốt đẹp !! Các auto margin chỉ hiệu ứng trục được đặt bởi absolute. - Sven van Zoelen
Đây là giải pháp duy nhất có hiệu quả đối với tôi. Câu trả lời đã chọn không thành công trong chrome mới nhất. - Egg


Giải pháp của matejkramny là một khởi đầu tốt, nhưng hình ảnh quá khổ có tỷ lệ sai.
Đây là ngã ba của tôi:

bản giới thiệu: https://jsbin.com/lidebapomi/edit?html,css,output

preview


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

377
2017-09-18 09:53



Điều này làm việc trong IE8 +, Chrome, v.v. - Justin
@ Justin nó hoàn toàn có thể: jsbin.com/sejejemudi/2/edit (bay lượn) - jomo
Tuyệt vời! Giải pháp này thậm chí hoạt động với các div lỏng. - Renan Ferreira
@bobo chỉ cần xóa top: 0;. Kết quả này chỉ bottom: 0; được áp dụng theo chiều dọc. - jomo
Đây sẽ là giải pháp được chấp nhận, trình duyệt chéo tương thích và hoạt động tốt. - Clain Dsilva


Giải pháp 3 dòng:

position: relative;
top: 50%;
transform: translateY(-50%);

Điều này áp dụng cho bất cứ điều gì.

Từ đây.


155
2018-02-10 04:48



Đối với những người tự hỏi, điều này làm việc cho IE9 + - Justin
Tiền tố: -ms- hoặc -webkit- (trước khi chuyển đổi). w3schools.com/cssref/css3_pr_transform.asp - Jorge Orpinel
Tiền tố cho IE9, nhưng không làm việc ở tất cả trong IE8 và thấp hơn: caniuse.com/#search=transform Nhưng ý kiến ​​của tôi: Tôi không quan tâm đến IE8 - Reign.85
Không ai nhận thấy điều gì sẽ xảy ra khi đứa trẻ được làm trung tâm cao hơn màn hình thiết bị và cha mẹ là đứa trẻ đầu tiên trong DOM ...? - Andrei Gheorghiu
Đẹp khi bạn không thể sử dụng position: absolute; bởi vì bạn cần chiều rộng chảy. - plong0


Giải pháp CSS PURE:

http://jsfiddle.net/3MVPM/ 

CSS:

.frame {  
    margin: 1em 0;  
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}  
img {  
    max-height: 25px;  
    max-width: 160px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
}

Công cụ chính

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

125
2017-09-05 11:09



Tốt đẹp! Nhưng nó dường như không hoạt động trong IE7: ( - arnaud576875
Xin vui lòng cho tôi giới thiệu bạn đến một hướng dẫn ở đây mà thậm chí làm việc cho IE5 (khấu trừ từ những gì tôi đã đọc cho đến nay trong bài viết) webmasterworld.com/css/3350566.htm - code ninja
giải pháp này là một khởi đầu tốt, nhưng hình ảnh quá khổ được thay đổi kích thước với tỷ lệ sai. Xin vui lòng xem câu trả lời của tôi. - jomo
@ HansWürstchen yeah, nhưng vấn đề là để trung tâm, cho dù nó được quá khổ là sự lựa chọn thiết kế. Thêm css = lộn xộn hơn :) - code ninja
@matejkramny nó không được quá khổ. nếu bức hình Là quá khổ, nó có tỷ lệ sai. điều đó có nghĩa là nó được kéo dài theo chiều cao và trông không đúng. - jomo


Bằng cách này bạn có thể căn giữa một hình ảnh theo chiều dọc (bản giới thiệu):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

95
2017-11-22 16:03



Kỳ lạ thay, tôi không thể nhận được câu trả lời được chấp nhận để làm việc trong tình huống của tôi (tôi cũng đang cắt xén hình ảnh với tràn: ẩn). Tuy nhiên, điều này đã làm việc rất hiệu quả. - Luca Spiller
Tôi đã chỉ thử nghiệm điều này trong Chrome, nhưng dòng chiều cao dường như là chìa khóa. Tôi đặt thuộc tính vertical-align trên div thay vì img, vì img của tôi nằm bên trong một anchor (<a/>). - Todd Price
Vâng, đơn giản hơn nhiều sau đó là giải pháp được chấp nhận và hoạt động rất đẹp. Tôi cũng tìm thấy giải pháp này trong jsfiddle. - vdboor
Nếu bạn biết những gì chiều cao để phục vụ cho, điều này hoạt động khá tốt - Greggg
thử nghiệm nó trong FF, Chrome và Safari - nó thực sự có vẻ hoạt động - klaffenboeck


Đối với những người truy cập bài đăng này và quan tâm đến giải pháp hiện đại hơn và không cần hỗ trợ các trình duyệt cũ, bạn có thể thực hiện việc này:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Đây là một cây bút: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


90
2017-12-29 20:13



Có vẻ tốt. Có thể thay đổi văn bản mặc dù - Drew
Điều này đặc biệt hữu ích nếu chiều cao của vùng chứa không được đặt - Dave Barnett


Bạn có thể thử đặt CSS của PI thành display: table-cell; vertical-align: middle;


19
2017-09-07 16:31



Tôi đã nhìn thấy nhiều phương pháp khác nhau, nhưng đây là một phương pháp mới (ngay cả trong năm 2013) với tôi. - Mike Ebert
Tốt hơn là đặt hình ảnh bên trong một bảng chỉ để căn giữa nó. - Jonats
display: table-cell không luôn luôn đúng kích thước nếu bạn muốn chiều rộng là 100% - Redtopia