CSS - 較小的一個+隱藏溢出內線中鋒大格

http://jsfiddle.net/vT65S/CSS - 較小的一個+隱藏溢出內線中鋒大格

HTML：

<div class="container"> 
    <div class="wide1">test</div> 
</div> 

<div class="container"> 
    <div class="wide2">test</div> 
</div> 

<div class="container"> 
    <div class="wide3">test</div> 
</div>

CSS：

.container { width: 100%; text-align: center; margin: 20px 0; overflow: hidden; } 
.container div { background: red; margin: 0 auto; } 

.wide1 { width: 100px; } 
.wide2 { width: 600px; } 
.wide3 { width: 1100px; }

我想有一個垂直線上的所有「測試」（居中）。我需要在我不知道內部div的寬度的情況下使用它。

來源

2012-06-02 user1432269

明白了！但用JavaScript ... http://jsfiddle.net/vT65S/10/

jQuery(function($){ 
    $(".container > *").each(function(){ 
     var m = ($(this).parent().innerWidth() - $(this).outerWidth())/2; 
     $(this).css("margin-left", m); 
    }); 
});

也許有純CSS的解決方案

來源

2012-06-03 18:40:00 user1432269

以什麼爲中心？外部容器div？你必須重寫內部div的寬度，如max-width: 100%。

例子：http://jsfiddle.net/vT65S/1/

.container div { background: red; margin: 0 auto; max-width: 100% }

來源

2012-06-02 10:51:12

但這種變化的寬度內部div，如果裏面有其他東西呢？例如。圖像 - http://jsfiddle.net/vT65S/4/或簡單的幾段文字？ – user1432269

我不清楚你實際上想要發生什麼 - 用那個圖像的例子，你最終的結果是什麼樣的？另外 - 你明確地設置了圖像的寬度，不要忘記'max-width'他們：http://jsfiddle.net/vT65S/9/ –

得到了同樣的問題（？） - 用CSS3平移X解決

.container div{ 
    position: relative; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
}

來源

2016-07-04 14:31:13 phils

乾杯，這裏最好的答案。與親戚和絕對孩子一起工作 –

CSS - 較小的一個+隱藏溢出內線中鋒大格

回答

相關問題