爲什麼內容不在百分比

的條款中心的寬度爲什麼內容不，當我在%方面提供寬度，而不是px爲什麼內容不在百分比

.content-container{ 
 
     width : 100%; 
 
     margin:0 auto; 
 
     padding: 80px 0 0 0; 
 
     position: relative; 
 
     display: block; 
 
    } 
 

 
    .content-container2{ 
 
     width : 100px; 
 
     margin:0 auto; 
 
     padding: 80px 0 0 0; 
 
     position: relative; 
 
     display: block; 
 
    }

<div class='content-container'> 
 
    <div style="float:left;">Hello there</div> 
 
</div> 
 

 
<div class='content-container2'> 
 
    <div style="float:left;">Hello there</div> 
 
</div>

中心我想內容以寬度= 100％爲中心。提前致謝。

來源

2015-02-08 Ben Lind

100％寬元素填充的整個寬度所以集中這種元素的容器沒有多大意義。你究竟想要達到什麼樣的效果？ – JJJ 2015-02-08 14:07:19

@Juhana，我正在嘗試構建一個基於移動的web應用程序，我需要將寬度設置爲100％。但是對於桌面來說，這是1000px的中心工作。 – 2015-02-08 14:08:54

您是否考慮過'max-width：1000px'而不是？ – JJJ 2015-02-08 14:09:15

您是否考慮過使用媒體查詢？

看看CSS3 media queries。

他們正是你所需要的。您只需在每種媒體查詢的情況下指定一些最大或最小屏幕尺寸。通過這種方式，您可以設計您的網站在移動設備，平板電腦，計算機等上的外觀，而且它們不一定都是相同的！

使用媒體查詢，您可以將移動設備的寬度設置爲100％，並將寬度設置爲50％並將其居中放置在臺式計算機上。

在像電腦這樣的大屏幕上看起來不錯的東西不一定在移動設備上看起來不錯，但使用媒體查詢，您可以爲兩個設備設計不同的版本！

例如，你只適用於臺式電腦使用min-width

@media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/ 
    body { 
     background-color: lightblue; 
    } 
} 

@media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/ 
    body { 
     background-color: yellow; 
    } 
}

這樣執行一些CSS，你的網頁看起來臺式電腦不同，看起來在移動設備和平板電腦不同。

另外，請參閱this偉大的鏈接。

來源

2015-02-08 14:14:46 Data2000

添加一個新類到您的樣式表，這個類分配給內容容器

.center { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -25%; 
    margin-top: -25%; 
    transform: translate(-50%, -50%); 
    width: 40%; 
    height: 50%; 
} 

<div class='content-container center'> 
    <div style="float:left;">Hello there</div> 
</div> 

<div class='content-container2'> 
    <div style="float:left;">Hello there</div> 
</div>

這裏是一個活生生的例子

FIDDLE

來源

2015-02-08 14:17:06 NMindz

爲什麼內容不在百分比

回答

相關問題